LouUXPD

I had replicated the animation on codepen, but it worked for me. Only difference? The code of the second animation was put after the code of the first. I replied on the site .. and it works!! But it makes no sense I think. But now it works. (strange) Thanks to all interested

it's hard to explain, I apologize. I have this animation that is fixed with pin:true, once it ends (so I go to the section below), a second and different animation should start. The problem is that the second anim during the scrolling of the first, in fact the markers are long before the actual section arrives. How can I do? <section class="change-color" data-color="#7543ad"> ..first animation </section> <section class="change-color" data-color="#076b49"> ..second animation </section> //first is: const composeTl = gsap.timeline({ scrollTrigger: { trigger: ".active-compose.first", start: "center center", scrub: 1, pinSpacing: true, pin: true, } }); ecc.... //second anima (does not start correctly, -- he starts when the first one has yet to finish) const borderLine = gsap.utils.toArray(".borderLine"); borderLine.forEach((line) => { gsap.to(line, { // x: 100, scrollTrigger: { trigger: line, start: "top 70%", markers: true, onEnter: () => $(line).addClass('animated'), } }) });

Thanks! just wanted to figure out how to be able to learn code using forEach or something else. Another Request: I should have another animation (under this) with scolltrigger .. however, but start in the middle of this animation (the markers in fact arrive earlier), how can I correct?

Hi, I created an animation with scroll trigger (complex for me). Scrolling the section becomes fixed, and I have 2 different animations that repeat for 3 blocks. The animation I made works, but I wanted to use the optimized code for learn and correct. Thanks