Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
HeatherMA

GSAP Parallax effect on tablet tilt

Recommended Posts

Hi

 

I am working on a website for a client which is basically an old flash site which I am translating into HTML with GSAP animation. The whole thing also uses parallax.js to create a layered 3d effect. This works great across all devices and moves when an ipad is tilted etc. My problem is that tweenmax is clashing somehow with the parallax javascript and causing the animations to jump or in the case of CSS opacity the fade does not work at all. When I remove parallax.js then it works just fine.

 

So I did some research and then it occurred to me that it may be possible to create the parallax effect without using the plugin but through gsap itself and then it wouldn't cause compatibility issues. But although I can find examples of parallax controlled by mouse movement, there doesn't seem to be anything about creating this effect with device orientation/tilting etc

 

Is this even possible?

 

Thanks 

Link to post
Share on other sites

HI and welcome to the GreenSock forums

 

With the jumping animation it sounds like GSAP and parallax.js might be fighting for control of the same properties of the same elements.

Are you using GSAP to move the same elements that parallax.js is trying to move? I would suggest only animating children of the parallax-controlled DOM elements.

 

I took a brief look at the parallax.js source and I don't see it changing opacity anywhere so I'm a bit puzzled why opacity tweens wouldn't work. 

 

It appears that parallax.js will use the mouse position on desktop. Although we do not normally troubleshoot 3rd party tools, if you create a very very basic example (preferably using CodePen) to illustrate the conflict we will take a look and see if there is anything obvious.

 

---

 

As for controlling a GSAP animation based on device tilt, I'm not at all familiar with the the APIs that return the gyroscope info.

I imagine you could build a TimelineLite that moves different DOM Elements (layers) at different speeds (to get the parallax) and then control the progress() of that timeline based on the values you get from the devices rotation, but I'd actually recommend that you handle it more in the same way that parallax.js is doing it — let the amount of rotation directly impact the transforms of the layers. 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×