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! ?