scrollTrigger Start and End in incorrect position

[freedomweb]

please help me, thank you😪

See the Pen ZERPBaY by usafree (@usafree) on CodePen

[mvaneijgen]

Ah you've encountered the most made mistake of ScrollTrigger!

 

Quote

Never animate your trigger element!

 

I've wrapped your box in an extra element called .trigger and everything works as expected. You've probably going to make that mistake a lot more times, but try to keep it in mind. Even if it does work! You never want to animate your trigger element. Hope it helps and happy tweening! 

 

See the Pen jOKJBLZ by mvaneijgen (@mvaneijgen) on CodePen

[Cassie]

Hey there! We're always happy to help, but it's not very clear what you need help with.
 

Here's some tips?

 

• Right now you're saying start when the top of the .box2 element hits 100% of the way down the viewport, and end when the bottom hits the top.
• You don't have 'scrub' applied, so the animation won't be stretched over that distance, it's going to play over 0.5seconds (the default)
• You're also animating the trigger element on the y axis, we suggest wrapping it in a container element and animating that instead as you don't want the trigger to move and throw off calculations.