Babken10

thanks @mvaneijgen, it's amazing. So the transition on hover should I add using css or better in gsap?

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(); } };