Jump to content
Search Community

Change timeline dynamically

Assafi test
Moderator Tag

Recommended Posts


I am trying to build a timeline, that changes on demand.

In the Code Pen attached you can see a simple circle animation, it goes 250px to the right and back. I want the distance the circle passes will change upon button click.

Any ideas?



See the Pen eYQOeoN by the_w4 (@the_w4) on CodePen

Link to comment
Share on other sites

Hello and welcome to the GreenSock forums.


Thanks for the demo.


For a single tween you can just use repeatRefresh on that tween.


from the docs:

Setting repeatRefresh: true causes a repeating tween to invalidate() and re-record its starting/ending values internally on each full iteration (not including yoyo's). This is useful when you use dynamic values (relative, random, or function-based). For example, x: "random(-100, 100)" would get a new random x value on each repeat. duration, delay, and stagger do NOT refresh.



See the Pen BaGBYoo?editors=1111 by snorkltv (@snorkltv) on CodePen


you will note that the x value is function-based. on each repeat that getX function will run and return the most recent value of x.

The tween will always repeat from 0 to the latest x value


You can also set repeatRefresh:true on a timeline and all tweens will be refreshed when the timeline repeats.



  • Like 4
Link to comment
Share on other sites

Ok that was easy!

But actually, I need something a little bit more complicated. I need to change a value inside a tween before it ends and repeats.

I have a scroll-triggered timeline that pins an element until it tweens all the way to the end of it and then the regular scroll continues.

I calculated the amount it needs to move and placed it in a variable (to_scroll_dis).

Let's say the element's width changed due to screen resizing - how can I change this variable while the timeline is running?

In the example, I added a button to change the width of the element to imitate this kind of situation.


I need to end the animation exactly where the element is ending, and as you can see - when I resize it needs to be recalculated and placed again in the timeline.


Thanks in advance for your help!


See the Pen poQzKqL by the_w4 (@the_w4) on CodePen

Link to comment
Share on other sites

First, most of the time if you want different animations for different screen sizes I would strongly suggest using scrollTrigger.matchMedia() as it allows you to create drastically different animations and layouts.


In this case it seems you just need a bit of responsive flexibility.


Again, function-based values and invalidating tweens on refresh can help greatly.


here is a great explanation of function-based values in tweens: 



the demo below will the animation will reset itself when you resize so that the red boxes will all be pinned and moved across the screen as you scrub until the blue box comes into view. open in a new window and resize.


See the Pen OJaLwgz?editors=0010 by snorkltv (@snorkltv) on CodePen


ScrollTrigger does a lot of highly optimized, amazing work under the hood so that things like this are seamless and painless.


Hope this helps.




ps. If you really want to get into the finer points of GSAP and ScrollTrigger you may want to consider my GSAP Course Bundle.



Also, if you do need tweens to be constantly changing their target value you may find the ModifiersPlugin of interest too



  • Like 2
Link to comment
Share on other sites



5 hours ago, Assafi said:

can I invalidate a timeline or ScrollTrigger upon mouse event as well?

Definitely, you can use the disable method in ScrollTrigger:



For timelines yo can use the invalidate method:



Hopefully this helps.

Happy Tweening!

  • 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...