Mamorukun Posted August 23, 2021 Share Posted August 23, 2021 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 More sharing options...
Cassie Posted August 23, 2021 Share Posted August 23, 2021 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? 3 Link to comment Share on other sites More sharing options...
Cassie Posted August 23, 2021 Share Posted August 23, 2021 // 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 3 Link to comment Share on other sites More sharing options...
Mamorukun Posted August 23, 2021 Author Share Posted August 23, 2021 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). 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 23, 2021 Share Posted August 23, 2021 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 1 Link to comment Share on other sites More sharing options...
Mamorukun Posted August 23, 2021 Author Share Posted August 23, 2021 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 😊 2 Link to comment Share on other sites More sharing options...
Cassie Posted August 23, 2021 Share Posted August 23, 2021 play(0) or restart() will do the same thing, just a preference of mine. 🙂 1 Link to comment Share on other sites More sharing options...
GreenSock Posted August 24, 2021 Share Posted August 24, 2021 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). 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now