Pause animation on hover

[halint]

Hello,

 

I am new to GSAP so please be gentle and I apologize if my questions seems stupid :)

 

I added tweenmax animation to my website to animate testimonials (like a slider). Everything works fine, the only thing I can't figure out is how to pause animation on testimonial card hover.

 

This is my code:

 

 

<script>
jQuery(function($) {
var cards = $('#card-slider .slider-item').toArray();
  
startAnim(cards);

function startAnim(array){
    if(array.length >= 4 ) {
        TweenMax.fromTo(array[0], 0.5, {x:0, y: 0, opacity:0.75}, {x:0, y: -120, opacity:0, zIndex: 0, delay:0.03, ease: Cubic.easeInOut, onComplete: sortArray(array)});

        TweenMax.fromTo(array[1], 0.5, {x:79, y: 125, opacity:1, zIndex: 1}, {x:0, y: 0, opacity:0.75, zIndex: 0, boxShadow: '-5px 8px 8px 0 rgba(82,89,129,0.05)', ease: Cubic.easeInOut});

        TweenMax.to(array[2], 0.5, {bezier:[{x:0, y:250}, {x:65, y:200}, {x:79, y:125}], boxShadow: '-5px 8px 8px 0 rgba(82,89,129,0.05)', zIndex: 1, opacity: 1, ease: Cubic.easeInOut});

        TweenMax.fromTo(array[3], 0.5, {x:0, y:400, opacity: 0, zIndex: 0}, {x:0, y:250, opacity: 0.75, zIndex: 0, ease: Cubic.easeInOut}, );
    } else {
        $('#card-slider').append('<p>Sorry, carousel should contain more than 3 slides</p>')
    }
}

function sortArray(array) {
    clearTimeout(delay);
    var delay = setTimeout(function(){
        var firstElem = array.shift();
        array.push(firstElem);
        return startAnim(array); 
    },3000)
}

});
</script>

 

[ZachSaucier]

Hey halint and welcome to the GreenSock forums.

 

1 hour ago, halint said:

the only thing I can't figure out is how to pause animation on testimonial card hover.

Since you're using a setTimeout you'll have to clear that and then create one again when the section is no longer hovered.

 

However, I would approach this situation quite differently:

• I'd use GSAP 3 which has a smaller file size, a sleeker API, and a bunch of new features. It's easy to migrate to.
• I'd create the animations beforehand and just use control methods inside of your event listeners to control them. I talk more extensively about how to do that sort of thing in this article. If you create it as a big timeline then you can simply call .pause() on the timeline in the mouseenter event.

[GreenSock]

You could use a gsap.delayedCall() instead of the setTimeout() so that you can pause()/resume() it when users roll over/out. So this is a quick & dirty port of your code: 

jQuery(function($) {
	var cards = $('#card-slider .slider-item').toArray(),
		autoAdvance = gsap.delayedCall(3, function() {
			cards.push(cards.shift());
			startAnim(cards);
			autoAdvance.restart(true);
		});

	$('#card-slider').hover(function() { autoAdvance.pause(); }, function() { autoAdvance.resume(); });

	startAnim(cards);

	function startAnim(array) {
		if(array.length >= 4 ) {
			gsap.fromTo(array[0], { x:0, y: 0, opacity: 0.75}, {x:0, y: -120, opacity:0, zIndex: 0, delay:0.03, ease: "cubic.inOut", onComplete: sortArray, onCompleteParams: [array]});

			gsap.fromTo(array[1], {x:79, y: 125, opacity:1, zIndex: 1}, {x:0, y: 0, opacity:0.75, zIndex: 0, boxShadow: '-5px 8px 8px 0 rgba(82,89,129,0.05)', ease: "cubic.inOut"});

			gsap.to(array[2], {motionPath:[{x:0, y:250}, {x:65, y:200}, {x:79, y:125}], boxShadow: '-5px 8px 8px 0 rgba(82,89,129,0.05)', zIndex: 1, opacity: 1, ease: "cubic.inOut"});

			gsap.fromTo(array[3], {x:0, y:400, opacity: 0, zIndex: 0}, {x:0, y:250, opacity: 0.75, zIndex: 0, ease: "cubic.inOut"});
		} else {
			$('#card-slider').append('<p>Sorry, carousel should contain more than 3 slides</p>')
		}
	}
	
});

 

4 hours ago, halint said:

I am new to GSAP so please be gentle and I apologize if my questions seems stupid

There are no "stupid" questions around here. I think you'll find that these forums are unusually friendly and welcoming. We don't tolerate snarky/condescending posts. 

 

By the way, you had a mistake in your code which is somewhat common: 

onComplete: sortArray(array)

That immediately calls sortArray(array) and the RESULT is what onComplete is set to. Instead it should be: 

onComplete: sortArray, onCompleteParams: [array]

// -OR-

onComplete: function() { sortArray(array) }

 

Happy tweening! And welcome to the world of GSAP. Enjoy. 

[halint]

Thank you for your support! It's really nice to see good people on forums, specially for me as a beginner

 

I added this code but now my cards are not visible and in console I see this error:

 

jquery.min.js?ver=3.5.1:2 Uncaught ReferenceError: gsap is not defined
    at HTMLDocument.<anonymous> ((index):251)
    at e (jquery.min.js?ver=3.5.1:2)
    at t (jquery.min.js?ver=3.5.1:2)

 

7 hours ago, GreenSock said:

You could use a gsap.delayedCall() instead of the setTimeout() so that you can pause()/resume() it when users roll over/out. So this is a quick & dirty port of your code: 

jQuery(function($) {
	var cards = $('#card-slider .slider-item').toArray(),
		autoAdvance = gsap.delayedCall(3, function() {
			cards.push(cards.shift());
			startAnim(cards);
			autoAdvance.restart(true);
		});

	$('#card-slider').hover(function() { autoAdvance.pause(); }, function() { autoAdvance.resume(); });

	startAnim(cards);

	function startAnim(array) {
		if(array.length >= 4 ) {
			gsap.fromTo(array[0], { x:0, y: 0, opacity: 0.75}, {x:0, y: -120, opacity:0, zIndex: 0, delay:0.03, ease: "cubic.inOut", onComplete: sortArray, onCompleteParams: [array]});

			gsap.fromTo(array[1], {x:79, y: 125, opacity:1, zIndex: 1}, {x:0, y: 0, opacity:0.75, zIndex: 0, boxShadow: '-5px 8px 8px 0 rgba(82,89,129,0.05)', ease: "cubic.inOut"});

			gsap.to(array[2], {motionPath:[{x:0, y:250}, {x:65, y:200}, {x:79, y:125}], boxShadow: '-5px 8px 8px 0 rgba(82,89,129,0.05)', zIndex: 1, opacity: 1, ease: "cubic.inOut"});

			gsap.fromTo(array[3], {x:0, y:400, opacity: 0, zIndex: 0}, {x:0, y:250, opacity: 0.75, zIndex: 0, ease: "cubic.inOut"});
		} else {
			$('#card-slider').append('<p>Sorry, carousel should contain more than 3 slides</p>')
		}
	}
	
});

 

 

[halint]

Sorry, I didn't have gsap integrated, only TweenMax.

 

Now I removed Tweenmax and added GSAP 3, copied your code and now I have following error in console:

 

ncaught ReferenceError: sortArray is not defined
    at startAnim ((index):253)
    at Tween.<anonymous> ((index):243)
    at _callback (gsap.min.js:10)
    at _renderZeroDurationTween (gsap.min.js:10)
    at Tween.render (gsap.min.js:10)
    at Timeline.render (gsap.min.js:10)
    at ea (gsap.min.js:10)
    at Array.updateRoot (gsap.min.js:10)
    at qk (gsap.min.js:10)

 

I am so lost

[halint]

I figured it out.

 

Now it's working and does pause on hover.

 

However, the only thing now is that transition is not to smooth...

 

Here is the codepen I got the script from: 

See the Pen yoPBMP by Danil89 (@Danil89) on CodePen

 

And this is now on my website, using GSAP 3 instead Tweenmax:

 

https://kajahaler.si/testimonial-caroseul/

 

As you can see on my website, there is a glitch when testimonial comes to the center, upper testimonial is covering it for a bit.

 

Anyone has an idea how to solve this?

[mikel]

Hey @halint,

 

It could be better if you use a set tween for z-index.

 

See the Pen 528a406d662aec499941489b74a93180 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[halint]

On 12/22/2020 at 2:11 PM, mikel said:

Hey @halint,

 

It could be better if you use a set tween for z-index.

 

 

 

 

Happy tweening ...

Mikel

 

Thank you Mikel, but your code is a lot different than mine and the end result is not what I want...

 

Here is my code:

 

<script>
jQuery(function($) {
    var cards = $('#card-slider .slider-item').toArray(),
        autoAdvance = gsap.delayedCall(3, function() {
            cards.push(cards.shift());
            startAnim(cards);
            autoAdvance.restart(true);
        });

    $('.slider-item').hover(function() { autoAdvance.pause(); }, function() { autoAdvance.resume(); });

    startAnim(cards);

    function startAnim(array) {
        if(array.length >= 4 ) {
            gsap.fromTo(array[0], { x:0, y: 0, opacity: 0.75}, {x:0, y: -120, opacity:0, zIndex: 0, delay:0.03, ease: "cubic.inOut"});

            gsap.fromTo(array[1], {x:79, y: 125, opacity:1, zIndex: 1}, {x:0, y: 0, opacity:0.75, zIndex: 0, boxShadow: '-5px 8px 8px 0 rgba(82,89,129,0.05)', ease: "cubic.inOut"});

            gsap.to(array[2], {motionPath:[{x:0, y:250}, {x:65, y:200}, {x:79, y:125}], boxShadow: '-5px 8px 8px 0 rgba(82,89,129,0.05)', zIndex: 1, opacity: 1, ease: "cubic.inOut"});

            gsap.fromTo(array[3], {x:0, y:400, opacity: 0, zIndex: 0}, {x:0, y:250, opacity: 0.75, zIndex: 0, ease: "cubic.inOut"});
        } else {
            $('#card-slider').append('<p>Sorry, carousel should contain more than 3 slides</p>')
        }
    }
    
});
</script>

 

Where can I set tween z index in here?

 

Merry Christmas!

[mikel]

Hey @halint,

 

Simply animate the property 'set' by a separate tween and position it as it suits you best.

 

See the Pen 8b42610a1c2e75dc0a8b660fdbb15cac by mikeK (@mikeK) on CodePen

 

The problem is also the opacity effect. Alternatively, you could animate matching colors.

 

See the Pen 9d09399df9b0be67043b8c0ac0c7590a by mikeK (@mikeK) on CodePen

 

Happy fading ...

Mikel

 

[Mlnto]

Hello,

 

i try to add a previous and next button to the slides.
So far i have this code, which works nearly like it should, but if I the direction is to the top and I click on the "prev" buttons, all the slides jumps over the page to a new direction, and then it works.

Is it possible, to just reverse the function on click and the other way round?

 

Here is my current code:

var imgs = gsap.utils.toArray(".slider-item"),
    noImgs = imgs.length,
    next = 2, // time to change
    endless,

    var img00,
        img01,
        img02,
        img03;
        img04;

    var start = 0;
    var switchJump = 0;

    var vars = {};

    
function crossfade(){

  $(imgs).each(function( index ) {
    if (index == 0) { img00 = imgs[0];}
    if (index == 1) { img01 = imgs[1];}
    if (index == 2) { img02 = imgs[2];}
    if (index == 3) { img03 = imgs[3];}
    if (index >= 4) { img04 = imgs[index];}
  });
 
  if (start == 0) {
    var action = gsap.timeline()
    .to(img00, {x:20, y:0, duration:1, opacity: .5})
    .set(img00, {zIndex:1},0.2)
 
    .set(img01, {zIndex:2},0.1)
    .to(img01, {x:60, duration:1, opacity: 1 },0.1)
    .to(img01, {y:100, duration:1 },0.3)
 
    .to(img02, {x:20, y:200, duration:1, opacity:.5},0.1)
 
    .to(img03, {x:0, y:-125, zIndex: 0, duration:1, opacity:0},0)
    .set(img03, {x:20, y:300})
 
    .to(img04, {x:0, y:-125, zIndex: 0, duration:1, opacity:0},0)
    .set(img04, {x:20, y:300})
 
    .to('#card-slider', {autoAlpha:1})

   // imgs.push( imgs.shift());

  } else {
    // REVERSE
    var action = gsap.timeline()
    .to(img00, {x:20, y:200, duration:1, opacity: .5})
    .set(img00, {zIndex:1},0.2)

    .set(img01, {zIndex:2},0.1)
    .to(img01, {x:60, duration:1, opacity: 1 },0.1)
    .to(img01, {y:100, duration:1 },0.3)

    .to(img02, {x:20, y:0, duration:1, opacity:.5},0.1)

    .to(img03, {x:20, y:300, zIndex: 0, duration:1, opacity:0},0)
    .set(img03, {x:0, y:-125})

    .to(img04, {x:20, y:300, zIndex: 0, duration:1, opacity:0},0)
    .set(img04, {x:0, y:-125})
    .to('#card-slider', {autoAlpha:1})
    }

    imgs.push( imgs.shift());
    endless = gsap.delayedCall(next, crossfade);

}

// start the crossfade
endless = gsap.delayedCall(0, crossfade);

// hover =================
var hover = document.querySelector("#card-slider");

$('.nextSlide').click(function() {
    endless.kill();
    start = 0;
    endless = gsap.delayedCall(0, crossfade);
});
$('.prevSlide').click(function() {
    endless.kill();
    start = 1;
    endless = gsap.delayedCall(0, crossfade);
});

hover.addEventListener("mouseenter", function (){
    endless.kill();
});
hover.addEventListener("mouseleave", function (){
    endless = gsap.delayedCall(1, crossfade);
});

 

[mvaneijgen]

@Mlnto could you maybe start a new topic and post a minimal demo.

[Mlnto]

Thanks for your replay. I openend a new Topic: