Babken10
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Babken10
-
-
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
Animation issue with timeline
in GSAP
Posted
thanks @mvaneijgen, it's amazing. So the transition on hover should I add using css or better in gsap?