Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animate one element with multiple scrollTrigger tweens

Recommended Posts


First time using scrollTrigger, and it's immediately  something  a bit trickier :D

I'm trying to animate an object (circle in the example) to different coordinates, while scrolling. I tried a few things, but this is the closest to the desired effect I managed to go. 

When you scroll slowly, it works fine. When you try to scroll a bit faster, that’s when things start to become messy.

Preferably, I would want to have circle immediately transition to another tween, even if due to scrub: 2 it didn't reach the final coordinates of a previous tween. 

Is there a better approach to this problem?

Thank you!!

See the Pen 81a09381e64d795209b6cb22f813282b by Momciloo (@Momciloo) on CodePen

Link to comment
Share on other sites

Hi @Shaun Gorneau,


Thanks for the speedy answer! :) 
That animation look exactly what I want to achieve, but there's one problem: if implemented like that, I'm losing settings for each target.

Now the whole animation plays within the target_1 settings, resulting in circle finishing its journey much before target_3's top reaches the center of the viewport. 😕  I need to be able to specify at what moment and for how long (how long scroll), the circle should be on a specific coordinates, and how much time it should transition between coordinates. 

If it makes the whole problem simpler, scrub is not that important.

Link to comment
Share on other sites

Hey momciloo. When creating this sort of thing I recommend creating your animation without any scroll-related effects and then hook it up to scrolling once you're done. That way you can focus on the logic of the animation without being distracted. Hooking it up to ScrollTrigger once the animations is the way you want it to be should be easy. 

Link to comment
Share on other sites

Hi @ZachSaucier thanks for your reply!

How would you approach an animations that has several segments, but nothing happens between segments? 


For example, go from A to B, and then nothing, until I scroll enough to trigger B to C? 


The only approach I can think of with having one animation and one scroll trigger, is that I should somehow find a way to translate total scroll trigger's length into a total timeline's duration, and then add dynamic delay duration where needed, so that when I scroll through the animations, it stays still where needed because of delays. 


Will that be the best way to approach? 


Thank you!!

Link to comment
Share on other sites

It depends on your exact needs. You could use a single timeline and ScrollTrigger and use blank space (offset or empty tweens) to add space between. Or you could create multiple animations and ScrollTriggers but if those animations affect the same properties of the same elements then you need to be careful with the logic to not create logical issues.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.