Sorry guys, slow to learn! (Killing scroll animations gracefully)

[NickWoodward]

As per the title, sorry! 😄

So I've a hero animation I'd like to trigger on first scroll. I'm going to add more animations to the timeline, but for the moment it animates the text in and out.

Problem is if I scroll down, then up, then down quickly, one animation interrupts the other (see image). As I add to the timeline I only see this becoming more buggy, and wondered the best way to approach this kind of problem?

My latest idea is to store the timelines that are in the onEnter and onLeaveBack callbacks in their own refs, then kill opposite timeline when its opposing callback is called (eg: onEnter => kill the timeline referenced in onLeaveBack, and vice versa). But I just wanted to ask if this is the right track, as each time I try something new it gets a bit off track/messy!

(Should be Logo Yay! 😄)

Thanks!

Nick

See the Pen GgpzVWo?editors=1011 by nwoodward (@nwoodward) on CodePen.

[NickWoodward]

Huh. Maybe I am smart?

See the Pen VYvNyxJ?editors=1011 by nwoodward (@nwoodward) on CodePen.

Still, is this a sensible way to do it? Especially as I'm going to be adding flip animations to the end of each timeline
 

[Rodrigo]

Hey Nick,

 

Yeah this is the typical case where the initial values that GSAP records when it first renders a Tween are not the natural ones and the fact that one animation is not yet completed when another, that affects the same elements and properties, starts. Pretty much the same situation as the theme switcher you created a few weeks ago.

15 hours ago, NickWoodward said:

Still, is this a sensible way to do it? Especially as I'm going to be adding flip animations to the end of each timeline

Yep, perhaps use restart( ) instead of play(0), but the result is the same though, just a good idea to know that the restart method exists and how it works:

https://stackblitz.com/edit/vitejs-vite-o9iewoo4?file=src%2FApp.vue&terminal=dev

 

Happy Tweening!

[NickWoodward]

6 hours ago, Rodrigo said:

where the initial values that GSAP records when it first renders a Tween are not the natural ones and the fact that one animation is not yet completed when another, that affects the same elements and properties, starts.

I'm not entirely sure what you mean about the initial values not being correct? I've definitely never got a solid mental model for this, if you've got the time to ELI5, I'd appreciate it! 

In my mind: I scroll forward => timeline with animateTitleOut plays as part of forwardRefAnimation => I scoll up and that timeline is killed. What I don't understand is why *that* doesn't look stuttery. It's surely killing a timeline that's running? But the opposite seems to be true? 🙃

But yeah, you're right - my inspiration for the fix came from the theme switcher example  - I'm learning, even if backwardly so...

 

6 hours ago, Rodrigo said:

Yep, perhaps use restart( ) instead of play(0), but the result is the same though, just a good idea to know that the restart method exists and how it works:

https://stackblitz.com/edit/vitejs-vite-o9iewoo4?file=src%2FApp.vue&terminal=dev

Will check out, thanks! But is that the right example? Couldn't see the use of restart?

 

22 hours ago, NickWoodward said:

Especially as I'm going to be adding flip animations to the end of each timeline

Hmmm, this is probably an "I've had one beer, can't see the obvious" problem, but I can't seem to work out why the FLIP animation is running straight away 😕
I think I'm running the correct logic (it works elsewhere) - get the state, change the state to the final position, flip the state. I've tried returning a timeline, paused and unpaused, but it just doesn't seem to work as I expect (unsurprisingly!)  
(uncomment line 39, if you do get a chance to look) 

See the Pen xbwemRj?editors=0011 by nwoodward (@nwoodward) on CodePen.

Really appreciate the help, sorry for being a pain, I'll get better eventually! 😄