Jump to content
Search Community

Parallax on scroll

joej 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

Hi @joej and welcome to GSAP!!

 

I'm not sure specifically which aspect of the scroll/parallax you're looking for ... but if it's the ability to navigate to sections on scroll (with parallax as an characteristic of the transition), here is a post where I helped someone with that just a few weeks ago.

 

 

And here is the CodePen specifically.

 

See the Pen qYEKLy by sgorneau (@sgorneau) on CodePen

 

 

Hope this helps! And happy tweening!

 

  • Like 4
Link to comment
Share on other sites

Thanks, Sahil!

Some of this is close to what I need. Just can't figure out how to give each element different z depths. Or maybe they are setting different speed for each element to give an appearance of depth? 

Link to comment
Share on other sites

Hi @joej, "speed" is just distance/time ... so that, in its most basic sense, is two properties of a tween on an object and can be represented by something like

 

obj = '#someObject';
time = 1;
distance = {x: 500};

TweenMax.to( obj, time, distance );

 

See the Pen KepvRV by sgorneau (@sgorneau) on CodePen

 

 

Another aspect of z-depth is scale. Things close are larger and move faster, things farther away are smaller and move slower.

 

Hope this helps!

 

 

Here is a thread where I helped somebody understand that a while back.

 

 

The specific pen: 

See the Pen YaJzZp by sgorneau (@sgorneau) on CodePen

 

  • Like 3
Link to comment
Share on other sites

11 minutes ago, joej said:

Still not what I'm looking for. Seems like everyone is doing it but no one knows how. It's a mystery! 

 

Well, one thing is for sure, parallax and scroll events are no mystery! ;-) But, I am unsure of what you are looking for. The example you provided shows many things going on ... but 2 things at its core

 

  1. Scroll event triggering page navigation (albeit clunky arrow controls offer more reliability)
  2. Parallax (to some extent ... more-so fixed positioning on elements than anything else) as an effect on some transitions

There are other cool things happening ... but what is it specifically your asking about?

  • Like 3
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...