How to animate to scrollTrigger scrub start point to avoid jumping

[dubfonik]

I've created an animation that:

1. Plays a timeline on page load; then
2. Initiates a scrollTrigger, to be scrubbed as the user scrolls.

I have two main problems:

1. The ScrollTrigger was getting created on page load (and was taking over the animation), so I created a function that gets called onComplete, but I have a feeling this isn't best practice. Is there a preferred way to execute this?
2. If the user has scrolled at any point before the ScrollTrigger is created then it will jump to that point. Instead, I would like to animate to that point and then the scrubbing can take over. Basically, I don't want the harsh jump to happen.

 

See the Pen dyEpvxQ by joelklease (@joelklease) on CodePen

[mvaneijgen]

You can do several things in this case depending on how important the animation is. You can block the scroll all together until it has finished. Or if you don’t mind the two tweens animating at the same time you can wrap your element in another element and use that for the second tween. The jump happens because you’re targeting the same element and your tween is over writing the previous tween, but you can target the parent of child so that the tweens don’t mix. Hope it helps and happy tweening!

 

 

[dubfonik]

15 hours ago, mvaneijgen said:

You can do several things in this case depending on how important the animation is. You can block the scroll all together until it has finished. Or if you don’t mind the two tweens animating at the same time you can wrap your element in another element and use that for the second tween. The jump happens because you’re targeting the same element and your tween is over writing the previous tween, but you can target the parent of child so that the tweens don’t mix. Hope it helps and happy tweening!

 

 

Thank you, I have tried that, though it seems to do the exact same thing (ie. jumps to the scrub position instead of animating to it). Did I do something wrong, perhaps?

See the Pen jOoMKxL by joelklease (@joelklease) on CodePen

[mvaneijgen]

If you change the tween to the parent you don’t want to wait for the other one to complete otherwise there will always be a jump. Just have them play at the same time, this seems like the easiest solution to me. It will never be perfect, but again if you want that you have to block the scroll until the first animation has finished (however that feel like bad UX to me)

 

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