Jump to content
Search Community

Mouseenter/mouseleave with different timelines

Mamorukun test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.


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?

  • Like 3
Link to comment
Share on other sites

// 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" }));

// 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

  • Like 3
Link to comment
Share on other sites

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).

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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 😊

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...