Moving multiple elements though the z-axis

[nvgomez11]

Hi, community… thanks for creating such a wonderful tool. It's a jaw-dropping tool ! 

 

Short problem description

In few words, I want to do something like this codepen, bringing each section to the front with an animation, but also creating the animations/triggers dynamically because the amount of sections are unknown.  😁

https://codepen.io/kccnma/pen/MQwPom

 

The detailed problem is: 
I have an unknown amount of <div> sections that I have to move through the z-axis one after another (imagine like moving through a tunnel where each section appears)

Let’s say there are 3 sections (It could be more). The one with 0px in the z-axis is the one that the user can see (I also have to play with the opacity, only the one with 0px will be opacity: 1).

So, Let’s say the first one is in 0px in the z-axis, the second one is in -500px in the z-axis, the third one is in -1000px the z-axis and so on…(each have a  -500px difference)

 

I need to animate each section with the scroll (I’m using scroll trigger). So, the approach I was thinking about is to have 1 trigger to move all the 3 sections to the front (now z values would accordingly be, 500px, 0px, -500), in this case the second section would be visible by the user. And I was thinking about having a second trigger to move one more time every section to the front, so the new values would be (1000px, 500px, 0px), so the 3rd section would be visible now.

I tried the mentioned above approach with timelines and separated animations but when the page reloads, somehow it looks as if the first trigger had already been fired. I’m not sure if the problem comes from using different trigger for the same element. I tried using fromTo animations, store the previous z value and move but this didn't work  .

Besides of that, the animations must be done dynamically, because as I mentioned, the amount of divs and triggers are unknown and the user could add/remove sections. So I tried creating the animations in a for loop but it worked only with scrub, and I need the animation to happen by itself.

What would be the best approach for this problem ?
Any example ?
Should I use timelines o single animations ?
What's the best approach to create animations dincamically depending on the amount of sections ? 

Thanks in advance for your help!  😀

See the Pen MQwPom by kccnma (@kccnma) on CodePen

[ZachSaucier]

Hey nvgomez11 and welcome to the GreenSock forums.

 

I would set this up as a single large timeline with a single ScrollTrigger. It'd be a bit easier to manage. 

 

6 hours ago, nvgomez11 said:

I tried creating the animations in a for loop but it worked only with scrub, and I need the animation to happen by itself.

If you use labels along with ScrollTrigger's snapping functionality it should work more like what you're wanting. But ScrollTrigger doesn't support scroll-jacking if that's what you're going for.

 

6 hours ago, nvgomez11 said:

What's the best approach to create animations dincamically depending on the amount of sections ? 

Definitely using a loop. Perhaps my article about animating efficiently can be of use.

[nvgomez11]

Hey ZachSaucier, thanks for your quick response! 

One thing I forgot to mention is that the expected behavior is:

When the user scrolls downs, section 2 should come to the front, if the user scrolls down one more time, then the third section should come to the front... and so on depending on the amount of sections. That's why I was thinking about using several triggers, (2 triggers in the case there are 3 sections.).

Could this still be achieved with a single large timeline and using labels along with ScrollTrigger's snapping functionality?

I'll read your article by the way! I really appreciate it! 

Thanks in advance.

[ZachSaucier]

2 hours ago, nvgomez11 said:

When the user scrolls downs, section 2 should come to the front, if the user scrolls down one more time, then the third section should come to the front... and so on depending on the amount of sections.

That's called scroll-jacking and is not (really) supported by ScrollTrigger. See this post for more info: