Jump to content
Search Community

ScrollTrigger animation on already animating Tween

Marco Rodrigues test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi.

I'm trying to animate a circular shape on scroll that sometimes might happen while a previous Tween with the same element is still animating.
If you take a look at the codepen, once the page is loaded, the circular shape is being animated, but if you scroll while it's still animating, it causes a jump on the circle.

The espected behaviour is that if you scroll while the Tween is animating, the animation should continue from the previous Scale value. 

 

I have already tried "overwrite: true" but that doesn't seem to help in this case.

See the Pen eYMbmgZ by marcorodriguesdev (@marcorodriguesdev) on CodePen

Link to comment
Share on other sites

7 hours ago, GreenSock said:

Yeah, you're creating conflicting tweens. Here's how I'd handle it: 

 

 

Thanks for the codepen and reply.
Your solution seems to solve it to some extent, but you can still see a bit of a jump if you scroll too soon on the page.

The codepen I provided is not accurate compared to the real case I will be using this animation, but the circle will be, after page load, animated into the first section of the page, showing just a bit of it (first tween), and then, if you scroll right after, the circle will be animated into fullscreen making the page full dark background. That's why the circle jump conflict is pretty noticeable at first.
 

Link to comment
Share on other sites

Or maybe?

See the Pen bGvOKMw?editors=0010 by GreenSock (@GreenSock) on CodePen



You were using the circle itself as the trigger element which is an issue because that trigger is moving,
Also scrollTriggers are immediately rendered so you'd want to stop that from happening so it doesn't 'precalculate' the animation values.
Then pop an overwrite 'auto' on the tween itself so it take priority over the initial load tween

  • Like 1
Link to comment
Share on other sites

4 hours ago, mvaneijgen said:

I was thinking of wrapping the ellipse element in its own container and animated that on scroll. This way you don't have conflicting tweens and they can play at the same time.

 

 

 

Managed to make it work using this approach, which was better for my use case. Thanks a lot!
 

1 hour ago, Cassie said:

Or maybe?
 

 


You were using the circle itself as the trigger element which is an issue because that trigger is moving,
Also scrollTriggers are immediately rendered so you'd want to stop that from happening so it doesn't 'precalculate' the animation values.
Then pop an overwrite 'auto' on the tween itself so it take priority over the initial load tween

 

 

Thanks for the reply.
Also works but there is just a small problem. If you run the demo and don't scroll, you will se the ellipse will end up with the value of "scale: 1.6" by inspecting the element. If you scroll after the animation is complete and go back to the top of the page, the value will go back to 1.6, which is the minimum.
If you run the demo again, this time you scroll down *while* the animation is playing and scroll back up afterwards, you will see that the "scale" value of the ellipse will not be 1.6 but instead will be the value saved when you first scrolled. Don't think I was explicit enough on the thread about this.

 

  • Like 1
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.
×
×
  • Create New...