Jump to content
GreenSock

miraclemaker

Is this type of feature possible with GSAP?

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm interested in creating a background effect similar to this page:

 

http://www.gettyendless.com/

 

 

Just the initial effect where the background images are rotating on what looks to be a 3D axis, and are reactive to the mouse cursor.

 

Is this possible with GSAP? Any tips much appreciated.

 

Thanks.

Link to comment
Share on other sites

  • Solution

Hello miraclemaker and Welcome to the GreenSock Forum!

 

That type effect is called a mouse / touch parallax effect. It just moves the element with the background-image to the left, right, top, and bottom based on the mouse cursor position using a mousemove event handler.

 

mousemove event handler: https://developer.mozilla.org/en-US/docs/Web/Events/mousemove

 

Example that uses jQuery for the mousemove event handler and TweenMax for the animation:

 

Demo: http://www.jqueryscript.net/demo/Mouse-aware-Parallax-Effect-with-jQuery-and-TweenMax-Mouse-Parallax/

 

Tutorial: http://www.jqueryscript.net/animation/Mouse-aware-Parallax-Effect-with-jQuery-and-TweenMax-Mouse-Parallax.html

 

There are other ways, but the above is a really straight forward effect :)

  • Like 4
Link to comment
Share on other sites

Yup, gettyendless was actually created with GSAP for animation and Three.js for 3D WebGL <canvas> rendering.

 

Perhaps this 3D mouse-driven parallax demo will help expose the basics of that type of effect: http://jsfiddle.net/Zuriel/qGcd9/ it uses 3D css transforms. 

Also, the mouse-driven movement doesn't really require GSAP. That demo is just uses TweenLite to set() various properties (not animate them over time) as the mouse moves and could be accomplished using plain JS. 

  • Like 4
Link to comment
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.
×