Scrolltrigger timeline add pause onleave

[gigito78]

Hello guys and thanks for your product, it's great!

I have a animation that i would like to go on pause when user scroll out from viewport.

I was thinking to use scrolltrigger + onleave callback but i couldn't reach my goal.

 

Can you help me?

Thanks, Luigi

 

 

See the Pen GRZOZay by gigito78 (@gigito78) on CodePen

[akapowl]

 

Hey @gigito78.

 

I am not really sure I understand, but there isn't really anything to scroll in, in the first place.

So it is not quite clear what you want to achieve and what could possibly be wrong with what you're trying.

 

Could you maybe update your codepen to make your issue clearer for others ?

 

[gigito78]

Hello akapowl and thanks for your response. I edited my pen.

My timeline tlfumo (between red div and green div) is activated from scrolltrigger - trigger: "#icone-fiamma".

 

I would like simply that when i scroll down to green div the animation is paused, instead at the moment it is calculated indefinitely 

[ZachSaucier]

Hey gigito78 and welcome to the GreenSock forums. I think you're going for something like this?

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

 

I recommend going through the GSAP getting started article, the ScrollTrigger documentation, the GSAP 3 migration notes (because you're using the old syntax), and my article on animating efficiently as I think you'd learn a lot from each of them. Maybe not all in one sitting, but feel free to if you want  

[gigito78]

Hello Zach!

thanks: toggleActions: "play pause play pause" did the trick!

I noticed also that you removed the string "delay: index * 1".

 

The only problem is that now my 3 divs "icona-fiamma" are animating one after another.

 

I would to animate together, with a little delay  like before, but i'm not sure about how to proceed correctly

[ZachSaucier]

It's probably a good idea to use a sub timeline:

See the Pen abNVJLj by GreenSock (@GreenSock) on CodePen

[ZachSaucier]

If all you're doing is staggering some things then you can just use GSAP's stagger:

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

 

If this is a stand in for more complex animations you can generate keyframes more dynamically:

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

[gigito78]

Sorry Zach i think to be more confused. I would like to retry:

I would like to reproduce (more or less) this coffee steam effect:

https://www.pinterest.it/pin/521291725601208264/

 

I would try to semplify my code so i reedited my pen:

See the Pen GRZOZay by gigito78 (@gigito78) on CodePen

also added a ID to every flame

 

Supposed that:

-timeline is the same for all 3 flames.

-the only parameter that should be different for every flame is the initial delay.

 

which is the simplest and cleanest way to change only the initial delay to a single flame? (i think based on flame id or index?)

 

[akapowl]

 

Hey @gigito78

 

This probably isn't the beast solution, but I still wanted to give it a shot.

 

I couldn't wrap my head around how you could possibly get that specific progression of animating 2,1,3 with the use of the elements' index, so I thought, your approach with different IDs was a good starting point.

 

I used classes in my example though - 'uno', 'due', 'tre' - and combined that with a gsap.utils.toArray()-function, in which I check if the element has a certain className first, and then set a variable for the delay, depending on the progression, that is wanted.

 

You'll notice, that the first tween in the tlfumo-timeline is an empty tween, that is only there to set the total duration of the timeline for each item to two seconds - because without it the individual timelines would have different total durations due to the different delays.

 

 

    tlfumo
    
    .to(element, { duration: 2.0 }, 0)   
    .to(element, { y:-75, duration: 1.5 }, thisDelay)  
    .to(element, { opacity: 0.5 }, thisDelay)
    .to(element, { opacity: 0 }, 1.0 + thisDelay)
      
    ;

 

I don't know, if there is a better way to prevent those different durations - probably is.

 

But alltogether this works just fine - give it a shot and fiddle around with the durations if you like - until somebody comes around with a cleaner approach, of course 😋

 

See the Pen fd0ce686508181197061b47fd1cd743d by akapowl (@akapowl) on CodePen

 

 

 

Cheers,

Paul

 

[ZachSaucier]

I'd probably do it using sub timelines like I said before. But there are lots of ways of doing it as seen in how many different approaches we've posted  

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

[gigito78]

Thank you both, i liked both approaches and learned various things from your examples!

 

It's my second animation with gsap and i wanted to learn how to use staggering in this situation (but will be for next time)

 

Edited my codepen in case other peoples have same problem as me

 

See the Pen GRZOZay by gigito78 (@gigito78) on CodePen

 

Good work, Luigi