Change timeline dynamically

[Assafi 0 Likes (Newbie)]

Hi!

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?

Thanks!

 

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

[Carl 11,325 Likes (Superhero)]

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.

 

 

[Assafi 0 Likes (Newbie)]

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

[Carl 11,325 Likes (Superhero)]

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.

 

Carl

 

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

 

 

[Assafi 0 Likes (Newbie)]

P E R F E C T!

This is exactly what I needed!!!

Thank you so much!

 

If I may just one more little question - can I invalidate a timeline or ScrollTrigger upon mouse event as well?

 

[Rodrigo 5,889 Likes (Superhero)]

Hi,

 

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:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/disable()

 

For timelines yo can use the invalidate method:

https://greensock.com/docs/v3/GSAP/Timeline/invalidate()

 

Hopefully this helps.

Happy Tweening!