Mouseenter/mouseleave with different timelines

[Mamorukun 10 Likes (Newbie)]

Hello everyone,

 

I want to link two different timelines to mouseenter/mouseleave events, so one can do what animations he wants when those events are fired. To test it, I created in the linked codepen a button which should hover to black background and blur to white. It's working fine... unless you start hovering/blurring faster that the tweens timers, resulting in strange colouring behaviours. Am I doing something wrong, or do I forget to initialize something?

 

Thank you very much in advance.

See the Pen RwgwNdV by st-phane-smirnow (@st-phane-smirnow) on CodePen

[Cassie 5,122 Likes (Superhero)]

Hey there!

It's hard to help by looking at this example because I would do this completely differently - this is a really good case for creating a tween or timeline and then playing it forward/on reverse on hover.

e.g.

See the Pen zYzYGeN?editors=0011 by GreenSock (@GreenSock) on CodePen

In general this sounds like it's going to invite conflicts and confusion if you're animating the same properties. There wouldn't be a one case fits all approach - it would depend on which properties you're animating and what you want to happen when they conflict.

overwrite:true or overwrite:'auto' will be your friends.

Do you envisage the timelines being more complex than these examples? Maybe you could put together a more fleshed out example for us to see?
 

[Cassie 5,122 Likes (Superhero)]

// you don't need 'new'
let TL_mouseleave = new gsap.timeline({ id: 'TL_mouseleave' });

// no need to 'add' you can just call TL_mouseleave.to() & overwrite: false is the default
TL_mouseleave.add(gsap.to('#btn', { backgroundColor: 'white', color: 'black', delay: 0, duration: 3, overwrite: false, ease: "ease.in" }));
TL_mouseleave.pause();

// so it becomes...

let TL_mouseleave = gsap.timeline({paused: true});

TL_mouseleave.to('#btn', { 
  backgroundColor: 'white', 
  color: 'black', 
  delay: 0, 
  duration: 3, 
  ease: "ease.in" 
});

Some notes on things I changed in your pen

[Mamorukun 10 Likes (Newbie)]

Thank you Cassie, I think that I will follow your advice and use only on single reversible TL. At the start, I wanted to forsee two different timelines, because I could imagine a given animation for the hover (ie. background colour change) and a different one for the blur (ie. button rotation).

[Cassie 5,122 Likes (Superhero)]

It's usually the best route to go with buttons.

(btw - if you're keeping it simple and not adding any more tweens - the timeline could just be a tween too)

For the other situation you described I'd probably do this - But that's nice and easy as there aren't conflicting tweens and you don't need timelines

See the Pen gOROrYX?editors=1111 by GreenSock (@GreenSock) on CodePen

[Mamorukun 10 Likes (Newbie)]

Aaaaaaaand that's the difference between a newbie like me and a mentor like you 😅 Thank you very much, I have already bookmarked that last codepen of yours !

EDIT: why a "spin.restart()" and not a "spin.play(0)" ? I am just a little confused to see a "restart" without a corresponding "start" somewhere 😊

[Cassie 5,122 Likes (Superhero)]

play(0) or restart() will do the same thing, just a preference of mine. 🙂

[GreenSock 18,251 Likes (Superhero)]

Just one small tip: you can call .restart(true) to have it include the "delay" in the restart. That's one difference with play(0).