Jump to content
GreenSock

joej

Parallax on scroll

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

I assume you are referring to parallax scrolling on this page https://art4globalgoals.com/en/project

 

Take a look at couple of demos in following threads,

 

 

Also take a look at following article that discusses how different scrolling methods affect performance,

 

https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97

  • 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

Ya they have different speed so it creates illusion of depth. Please go through the threads we mentioned, you would be able to modify them to achieve same effect.

  • Like 2
Link to comment
Share on other sites

I don't see anything about setting different speeds on the threads. I see this effect all the time but no one can explain it. 

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

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

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.
×