Animation issue with timeline

[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

[mvaneijgen]

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

 

[Babken10]

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

[mvaneijgen]

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