[Controlling appearance with scrolltrigger]

I will have a look, thank you!!!

[Controlling appearance with scrolltrigger]

Hello guys!

I am trying to figure out a way to make items enter one after another, but only when they appear on the screen.
 

I am able only to have an entire line of items enter together, and I want to separate the appearance so the items will enter one by one yet will stop entering if not in the viewport.
 

Here's what I managed to do; how do I go on from here?


 

Your help is much appreciated!!!
 

 

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

[Change timeline dynamically]

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?

 

[Change timeline dynamically]

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

[Change timeline dynamically]

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