Jump to content
Search Community

How to make parralax effect?

Dj.Sunrise test
Moderator Tag

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

The parallax effect is pretty simple and completely doable with GSAP. If doing multiple stages of parallax (e.g items down the page that shouldn't parallax until near/in the viewport), you may want to look into jQuery Waypoints or (better yet) ScrollMagic for the triggers.

 

But, at its core, the parallax effect is about moving a particular element with a timing different than that of the main content. It's best to translate an <img> or an element with a background image applied vs trying to animate a background image's position property.

 

So, whether choosing to translate an <img> or a <div> with a background-image, the principle is the same. You'll want to wrap that element in a div with overflow hidden and translate (usually the y) of the now child element. The way I like to handle this is to create a Timeline where I dictate the amount of movement on the y axis while allowing the scroll to dictate the progress of the timeline.

 

You can look at https://www.reynoldslakeoconee.com to see how I did this wit the top banner image. If you want multiple sections to parallax as you go down the page, I would look at ScrollMagic (which offers a nice GSAP plugin).

  • Like 5
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.
×
×
  • Create New...