micku7zu / vanilla-tilt.js Goto Github PK

Hi, how can I use parallax effect on svg elements (rect, circle, path)?

I tried to implement vanilla-tilt using require("vanilla-tilt"); but failed, because the init function isn't exported. It could be completely my fault and if I'm wrong, we should update the README.md instructions with a working example.
Basically, I tried the following:

var tiltjs = require("vanilla-tilt");
tiltjs.init(document.querySelector(".postImgContainer"), {
	max: 25,
	speed: 400
});

Which results in an tiltjs.init is not a function error. When i try this:

var tiltjs = require("vanilla-tilt");
VanillaTilt.init(document.querySelector(".postImgContainer"), {
	max: 25,
	speed: 400
});

It works, but just because VanillaTilt is globally available.

On branch https://github.com/bastilimbach/vanilla-tilt.js#fix/issue-15 this is working perfectly on IE11 but throws an annoying message on console:
Object doesn't support this action

Line: this.element.dispatchEvent(new CustomEvent("tiltChange", {

First of all thank you very much for this awesome library. It is really smooth and very performant.

Now for the question

I am using module bundler (webpack) and I am not used to exposing things to global window. I understand that VanillaTilt tries to init for all [data-tilt], but is it really necessary to expose to a window.VanillaTilt variable? If we don't do that what could be the repurcussion?

If you think this isn't necessary then I can send you a PR for the change.

Currently in docs, the JS way of using the lib shows this code.

VanillaTilt.init(document.querySelector(".your-element"), {
  max: 25,
  speed: 400
});

However it should be mentioned that we can also provide a NodeList via document.querySelectorAll(".your-elements").

currently not working on small screens?

Is it possible to make child elements appear unaffected by the data-tilt effect?

I believe the only way to achieve this is by applying inverted css transition effects to the child elements. Correct me if I am wrong.

Does anyone know an easy way to do this?

Hi there, I recently discovered this plugin and I love using it but when I hover over my div it moves down across the page. Let me show you some pictures:
The images

I'm using this css for centering:

.radio {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

And this is the html:

<div class="radio" data-tilt data-tilt-max="1" data-tilt-speed="100">
        <img src="https://media4.giphy.com/media/jUJgL0iByjsAS2MQH1/giphy.gif?cid=ecf05e47mxaj52sr8m70filml8juw3o9odak51rnzlz1ufxp&rid=giphy.gif"/>
        <div class="radiodescription">
          <h2>LOFI RADIO</h2>
        </div>
    </div>

I am using php, site is hosted on glitch, and there is a css reset that runs at the start.

Hello!

Love the library, works great in Chrome but there is some weird flickering behaviour going on in Safari for some reason. Not 100% why this should be the case, but thought it would be good to let you know.

Website is www.johnenderby.com vanilla-tilt is used on the homepage's middle section.

Would be good to know why it isn't working!

Hello. Thanks for you plugin.
Google Chrome console warning:
bundle.js:1 [Deprecation] The deviceorientation event is deprecated on insecure origins and will be removed in M76, around July 2019. Event handlers can still be registered but are no longer invoked since M74, around April 2019. See https://www.chromestatus.com/feature/546840747

add -webkit-overflow-scrolling: touch; to whichever element is using overflow scrolling!

Hello I'm having trouble with my vue.js project implementing this lib

I npm installed

in my component, i import VanillaTilt from "vanilla-tilt";
and add the necessary data attributes as shown in the example div

anything I'm missing?

Is there a way to rotate the element by 180 degrees? I would like to look at the back side. I was thinking of a container inside the element that I can rotate 180 degrees, but unfortunately the glare effect doesn't work.

I would like to display the whole thing animated, otherwise I could just change the content of the element for front and back, but important would be a real rotation as animation.

Hi! Great project you have here. I've loved using it, but have one problem. I set up the parallax effect as instructed by the demo page (I also made the effect more dramatic by increasing the translateZ value). for a while, everything worked fine, but then I added a backdrop-filter: blur(); effect on the container element and the inner element no longer sticks out like before. any idea why this is happening?

Because browser vendors now expose the device's orientation only when the user has granted permission (and I'm not sure but I think - like with other APIs - you can only ask permissions based on a user-initiated action, like a click listener?) then could we maybe have the option to tilt based on a scroll position?

I'd imagine this to be useful for marketing/landing pages, where you'd want a tilt effect on mobile devices, but can't presume a user to click anything before (so we'd have access to the rotation events) 🤔

Related: w3c/deviceorientation#57

How? I'm not a hardcoder. Can you provide a code to disable vanilla-tilt.js on device smaller than 768px?

So instead of just on hover, the tilt is based on mouse position. I'd be more than willing to provide a PR if pointed in the right direction for how to achieve this.

Please include support to mobile device events devicemotion and deviceorientation as well as current mouse events.

Please note, however, that some low-end mobile devices have an accelerometer but does not have a gyroscope, so that just checking for window.DeviceOrientationEvent availability is not enough --- you must also test deviceorientation event properties alpha, beta, and gamma, falling back to devicemotion event if they are null.

Note, however, that even devicemotion event's rotationRate.alpha, rotationRate.beta, and rotationRate.gamma may also be null, so that, in the last case, one should fall back to x/y/z acceleration data.

There's a simple HTML test page which can be used to test a mobile device's motion/orientation capabilities, whose code is published at mobiForge. The HTML code is transcribed below:

<DOCTYPE html>
<html>
  <head>
    <script>
    function init() {
      //Find our div containers in the DOM
      var dataContainerOrientation = document.getElementById('dataContainerOrientation');
      var dataContainerMotion = document.getElementById('dataContainerMotion');
 
      //Check for support for DeviceOrientation event
      if(window.DeviceOrientationEvent) {
        window.addEventListener('deviceorientation', function(event) {
                var alpha = event.alpha;
                var beta = event.beta;
                var gamma = event.gamma;
               
                if(alpha!=null || beta!=null || gamma!=null) 
                  dataContainerOrientation.innerHTML = 'alpha: ' + alpha + '<br/>beta: ' + beta + '<br />gamma: ' + gamma;
              }, false);
      }
 
      // Check for support for DeviceMotion events
      if(window.DeviceMotionEvent) {
      window.addEventListener('devicemotion', function(event) {
                var x = event.accelerationIncludingGravity.x;
                var y = event.accelerationIncludingGravity.y;
                var z = event.accelerationIncludingGravity.z;
                var r = event.rotationRate;
                var html = 'Acceleration:<br />';
                html += 'x: ' + x +'<br />y: ' + y + '<br/>z: ' + z+ '<br />';
                html += 'Rotation rate:<br />';
                if(r!=null) html += 'alpha: ' + r.alpha +'<br />beta: ' + r.beta + '<br/>gamma: ' + r.gamma + '<br />';
                dataContainerMotion.innerHTML = html;                  
              });
      }
    }   
    </script>
  </head>
  <body onload="init()">
    <div id="dataContainerOrientation">
      No device orientation data
    </div>
    <div id="dataContainerMotion">
      No device motion data
    </div>
  </body>
</html>

There is visible flickering on our project as well as your own home page that seems to stem from gyroscope feature being enabled on desktop computers. Disabling fixes the issue.

Chrome 76 on Mac with version 1.7.0.

Wondering if its possible to implement a delay or add easing to the tilt effect.

See how http://thexx.info/home/ works for an example.

The parallax effect doesn't appear to work on Firefox (version 51.0.1 (64-bit)) but still works on other browsers. Is this a problem with my website or vanilla-tilt.js?

Site: https://newsoncreative.co.uk

See video demo of Vanilla-tilt.js vs Tilt.js: https://www.youtube.com/watch?v=qAQvQzDM9xc

The animation of the tilt is really not smooth and "stutters" in certain mouseover positions. The original Tilt.js doesn't seem to have this issue.

Also it appears that Vanilla-tilt.js is updating the tilt element styles even when the mouse is no longer over the tilt element which obviously leads to weird continuous animations and performance penalty when the user isn't interacting with the tilt element. You can see this in the browser dev tools (style property on tilt element updating even when mouse is away from element).

Macbook pro (Mojave) running chrome 85.

Perhaps this is related to the other ticket about gyroscope issues? I am on a laptop so I wouldn't expect gyroscope to come into play.

I thought it was 35 because of the README but it's actually 15.

I love the new gyroscope features, thanks for those. Unfortunately it doesn't play well with some of my stuff so I want to disable it easily. I tried this but it didn't work:

data-tilt-gyroscope="false"




I think the dist/ files needs some CDN. Some simple solutions?

Hi all. I am having issues getting vanilla-tilt to work in IE.

I have been referring to this post about using a custom event polyfill: #49

However, I cannot seem to get this to work. It seems to do nothing, and it's described as a drop in solution that you include before the vanilla-tilt.js file.

I am using this polyfill - exactly as it is. Do I need to pass configs to it in any way?

(function () {

  if ( typeof window.CustomEvent === "function" ) return false;

  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: null };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();

//vanilla-tilt.js file included here...

Could anyone please explain what I need to do to get this working properly?

I have been attempting to disable the glare while the element flips. I tried changing opacity, however each time the mouse moves the element is updated. I have tried changing the attribute for glare to false through javascript but it doesn't update it.

As shown in the screenshot, the inner elements will not reset themselves to pervious position after mouse hovering.

Issue replicated in Chrome 70 and FireFox 62.

The jQuery version doesn’t have this issue.

I'll to make images slide with automatic tilt effects like
https://www.youtube.com/embed/c-RLenpyWrQ?autoplay=1&rel=0&controls=0&showinfo=1

How to?

This error appears on the chrome console after I minify the tilt library.
Error: "exports is not defined" for es2015
"module is not defined" for no es2015.

Gulp and babel versions:
"@babel/core": "^7.1.5",
"@babel/preset-env": "^7.1.5",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0".

If I try to minify without the babel then it gives error in the gulp.

Hi,

Thanks for the plugin, great to not need jQuery dependency.

I have an issue tho.

I get the error "_vanillaTilt2.default.init is not a function" when trying to init.

This is how I do it:

import VanillaTilt from 'vanilla-tilt'

const vanillaTilt = VanillaTilt.init(inner, {
  max: 7,
  speed: 2000
})

Hi everyone! I'm currently trying to use vanilla tilt to make 3d art and i can't get it to work on my iPad 6gen. The official sample page works on my iPad but for some reason, it won't work when i try to run it anywhere else.

Heres what I'm trying to test:CodePen
note: the above code works on my desktop and android phone, just not my iPad.

When popping out an inner element with a Z translation and preserve-3d on the root element, the inner element does not receive the glare effect as expected, only the "ground-level" items do. It would be great if inner elements translated in this way could also have glare effects applied (perhaps an additional "glare" element could be added for these translated layers?)

Hello all, this was a great effect while...while it worked on IOS devices.

I’m surprised there has been no comment on this being non-functional across all IOS devices.

Thank you for this lovely lib :)
I was surprised there's no issue raised and no support details about Edge / IE
In Edge it's just unusable. It's stuttering and freezing and blinking... i tested it on different windows machines and the effect is the same. Testing on the demos

https://micku7zu.github.io/vanilla-tilt.js/
http://gijsroge.github.io/tilt.js/

i'm not sure how to link an issue to both projects so i'll put a link to this issue in https://github.com/gijsroge/tilt.js/issues

@gijsroge @micku7zu

Hello. :)

I've already made several attempts and the full-page-listening option doesn't work.

I also tried to put an element in the mouse-event-element option but the animation happens as if it were in the main element.

Another issue is that my main element already has a default tranform. How do I get back to the default value?

It works great with React, thanks for your great work! The only thing I can't seem to get to work is adding glare effect to it, my current config looks like this:

      glare: 'true',
      'max-glare': 0.8,
      'glare-prerender': false,

What am I missing?

my PR allows you to publish by executing one of the realease scripts.

the PR: #1

A nice-to-have would be some TypeScript Typings by contributing to the DefinitelyTyped repository. So you have nice support, when you're using TypeScript.

Are you planning to do this?

Since this library uses the CustomEvent API it will throw an error on IE.
The following Polyfill works fine and should be included in the babel version:

https://polyfill.io/v3/polyfill.min.js?features=CustomEvent

I believe adding clearTimeout(this.transitionTimeout); in destroy method should fix the problem.
Right now i have no time for pull request :(

Thanks for such a great library, and the added awesomeness of the gyroscope functionality.

When I use my (android, one plus 6, chrome) phone laid on the desk, the element is flat, then tilts as expected when moved around.

When in bed or laid down (I was checking late at night), the image is tilted as far back as it can be as expected, but moving from side to side it jumps between extremes.

Question: Is there any way to counteract the jumping behaviour when the phone is upright? Is there a setting for initial angle (e.g. when the page is loaded I could set it, or set it at 45 degree angle to start with).

Thanks!

Hello, after many tests and tests, I allow myself to post here the fact that the use of the gyroscope does not seem to me any more possible. Impossible to make it work, as well on IOS as Android, Safari Chrome or Firefox ...

(Sorry, I'm french...)

Sometimes glare works perfectly and I couldn't be happier. Sometimes it causes mass shearing and almost seizure inducing effects. How to get around?

Is it possible to tilt objects different than a square? For example a hex or a circle?

Hello @micku7zu !
Is there any plans to implement a glare effect like in original one?

In ios 12.2 apple implement new security policy and block by default motion and orientation events. But tilt not working even turn on this events in safari settings.

Safari show this message in debug tools:

Blocked attempt to add a device motion or orientation listener because the browsing context is not secure.

Add a npmignore, so for example babel dont get confused of the .babelrc file.

See PR #10

Links and hover effects don't work inside of a container that is tilted.

Does anyone else have this issue?