Babken10 Posted March 11 Share Posted March 11 I'v created gsap timeline to show the animation sequence, but I want to add some functionality on mousenter and mouseleave. Now on mouseenter on unactive element need to pause the animation, and on mouseenter on unactive element need to make it active but after some delay need to contunue animation from the hovered element. I tried a little, but it does not work correct here $(".part").hover(mouseEnter, mouseLeave); function mouseEnter() { if (this.classList.contains('newFill')) { tl.pause(); } else { // gsap.to('.word', { duration: 0.5, opacity: 0 }); // gsap.to('.part.blue', { duration: 0.5, fill: '#CCDAE8' }); // gsap.to('.part.orange', { duration: 0.5, fill: '#FCDFD4' }); // gsap.to('.part.teal', { duration: 0.5, fill: '#D3F2F3' }); // $('.part').removeClass("newFill"); let currentIndex = parts.indexOf(this); let currentWord = words[currentIndex]; let color, endColor; console.log(currentIndex); if ($(this).hasClass('blue')) { color = '#00448C'; endColor = '#CCDAE8'; } else if ($(this).hasClass('orange')) { color = '#f15d27'; endColor = '#FCDFD4'; } else if ($(this).hasClass('teal')) { color = '#6ddfe3'; endColor = '#D3F2F3'; } gsap.to(currentWord, { duration: 0.5, opacity: 1 }); gsap.to(this, { duration: 0.5, fill: color }); setTimeout(function() { gsap.to('.word', { duration: 0.5, opacity: 0 }); gsap.to('.part.blue', { duration: 0.5, fill: '#CCDAE8' }); gsap.to('.part.orange', { duration: 0.5, fill: '#FCDFD4' }); gsap.to('.part.teal', { duration: 0.5, fill: '#D3F2F3' }); $('.part').removeClass("newFill"); tl.seek('step' + currentIndex); tl.resume(); }, 1000); } }; function mouseLeave() { if (this.classList.contains('newFill')) { tl.play(); } }; See the Pen GRLZGRP by babken-asryan (@babken-asryan) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted March 11 Solution Share Posted March 11 Hi @Babken10 welcome to the forum! Be sure to always use the latest version of GSAP, also TimelineMax hasn't been use since version 2 we are currently at version 3.12.5! If you're following some old guide check out this awesome getting started guide https://gsap.com/resources/get-started/ I've moved your label to be in the middle of each animation eg when the item is visible. Then in your .hover() function I get the element that is being hovered, gets its data-c number and feed that to the GSAP .seek() function, so now when you hover each part it seeks directly to that step and pauses the timeline. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! See the Pen xxeVzLW?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
Babken10 Posted March 11 Author Share Posted March 11 thanks @mvaneijgen, it's amazing. So the transition on hover should I add using css or better in gsap? Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 11 Share Posted March 11 Animating things with CSS which already gets animated with GSAP will result in a bad time. So I would not use CSS. I've add another label to the start of the tween for each part called start+INDEX and then used .tweenFromTo() to tween from the start + INDEX to step + INDEX which will then animate the tween on hover https://gsap.com/docs/v3/GSAP/Timeline/tweenFromTo(). Hope it helps and happy tweening! See the Pen BaEKVMj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 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