halint

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!

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: https://codepen.io/Danil89/pen/yoPBMP 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?

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

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)

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>