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.

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