ScrollTrigger conflict with previous animation

[Richard1604]

Hello,

I have been putting together an animation which has a stagger followed by a scrollTrigger script.

If I comment out the stagger (line #15: tl.to(".rowx", {stagger: 0.25, height: "1"  });)

then the scrollTrigger script works as expected however if I include the stagger then scrollTrigger seems to have the markers in the wrong place.

I have tried various combinations like refresh() to no avail.

Please could you advise.

Thanks.

See the Pen KKzXogK by rb1604 (@rb1604) on CodePen

[ZachSaucier]

Hey Richard. You are changing the amount of scroll on the page and not telling ScrollTrigger to update, so yes, of course it will be off

 

To fix it, just tell ScrollTrigger to update afterwards: 

var tl = gsap.timeline({onComplete: () => ScrollTrigger.refresh()});

Site notes: 

• We recommend using xPercent and yPercent for setting translations in percentages.
• It doesn't really make sense to have ScrollTriggers on tweens inside timelines. We recommend looping through each element and creating a ScrollTrigger for each. It'd also keep your code more DRY.
• I highly recommend using more standard code formatting - your code is very hard for me to read 😆

[Richard1604]

hi Zach,

that's brilliant thank you.

I was considering changing my tween to be a from() instead of a to() but this is much better.

PS, I will try to make my code tidier ;:)

[PointC]

2 hours ago, Richard1604 said:

PS, I will try to make my code tidier

Don't worry too much about it. Just do what I do right before someone sees my work.