halint Posted December 21, 2020 Share Posted December 21, 2020 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> Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 21, 2020 Share Posted December 21, 2020 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. Link to comment Share on other sites More sharing options...
GreenSock Posted December 22, 2020 Share Posted December 22, 2020 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. 3 Link to comment Share on other sites More sharing options...
halint Posted December 22, 2020 Author Share Posted December 22, 2020 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>') } } }); Link to comment Share on other sites More sharing options...
halint Posted December 22, 2020 Author Share Posted December 22, 2020 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 Link to comment Share on other sites More sharing options...
halint Posted December 22, 2020 Author Share Posted December 22, 2020 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? Link to comment Share on other sites More sharing options...
mikel Posted December 22, 2020 Share Posted December 22, 2020 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 2 Link to comment Share on other sites More sharing options...
halint Posted December 25, 2020 Author Share Posted December 25, 2020 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! Link to comment Share on other sites More sharing options...
mikel Posted December 26, 2020 Share Posted December 26, 2020 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 2 Link to comment Share on other sites More sharing options...
Mlnto Posted August 18, 2022 Share Posted August 18, 2022 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); }); Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 18, 2022 Share Posted August 18, 2022 @Mlnto could you maybe start a new topic and post a minimal demo. Link to comment Share on other sites More sharing options...
Mlnto Posted August 18, 2022 Share Posted August 18, 2022 Thanks for your replay. I openend a new Topic: 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now