ScrollTrigger Animation Pin Timeline Help

[LouUXPD]

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

See the Pen PoeXemq by LouUXPD (@LouUXPD) on CodePen

[mvaneijgen]

Hi @LouUXPD welcome to the forum!

 

Quote

If it works it works!

I really like @Cassie her quote. No need to dwell over if things can be better.

 

If you want some thing to improve there is a property called xPercent and yPercent if you want to work with percentages instead of using the x and y percent, but the rest looks fine!

 

[LouUXPD]

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?

[mvaneijgen]

26 minutes ago, LouUXPD said:

just wanted to figure out how to be able to learn code using forEach or something else.

 

Just do it! You can easily fork your pen so that you don't lose your progress and try things out!

 

27 minutes ago, LouUXPD said:

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?

 

Do you have a minimal demo, hard to guess from your description what could go wrong

[LouUXPD]

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'),

        }

    })

});

 

[Rodrigo]

Hi,

 

Maybe the image in that section is being loaded after the ScrollTrigger instance has been created, this could create a layout shift that causes the start/end points being misplaced. Perhaps a font is being loaded or some section is being lazy-loaded. Think of anything that could be causing a layout shift after ScrollTrigger makes all the calculations.

 

Another cause could be animating the top/bottom position/margin/padding on some element as well as Y or yPercent.

 

As you can see there are a few things that could be causing this, that is why @mvaneijgen asked for a minimal demo, other wise we are troubleshooting blind here.

 

Happy Tweening!

[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