irfankissa
irfankissa's Achievements
0
Reputation
-
Thank you very much for the reply. isActive() is going to be very helpful. I found the following link which is almost what I am looking for, will try creating something similar and use isActive() check on hover: https://codepen.io/jonathan/pen/qqmBjQ EDIT: ok, i have managed to do what i wanted using native javascript setInterval(). The codepen link https://codepen.io/irfanis/pen/MqpXLO I am still trying to find out if there is any way to use GSAP to repeatedly call a function? I call myFucntion() repeatedly using native Javascript setInterval() in this example. I tried to pause() the TimeLine within if(myAnimat.isActive() ) condition, but the animation stops before the animation finished. I guess the pause() was created for stopping the timeline immediately. I don't know much about gsap. <script> $(document).ready(function() { /* We have 4 images! on each click we move <div> by -1170 to left using the x:property Each time we click the next button, we want to move an additional -1170 pixels because our image is 1170px width */ var $wrapper = $("#parentWrapper"); var slideWidth = $("#parentWrapper").outerWidth(); var $sliderImg = $("#sliderImages"); var $nextButton = $("#nextButton"); var $prevButton = $("#prevButton"); var clickCount = 0; $nextButton.click(function() { clickCount++; if (clickCount > 3) { clickCount = 0; } //console.log(clickCount + ":: "+ -clickCount * slideWidth); TweenLite.to($sliderImg, 0.5, { x: -clickCount * slideWidth }); }); $prevButton.click(function() { clickCount--; if (clickCount < 0) { clickCount = 3; } TweenLite.to($sliderImg, 0.5, { x: -clickCount * slideWidth }); }); function myFunction() { clickCount++; if (clickCount > 3) { clickCount = 0; } console.log(clickCount + ":: " + -clickCount * slideWidth); TweenLite.to($sliderImg, 1, { x: -clickCount * slideWidth }); } function myStopFunction() { clearInterval(myVar); } function resumeInterval() { myVar = setInterval(function() { myFunction(); }, 6000); } $wrapper.mouseenter(function() { myStopFunction(); }); $wrapper.mouseleave(function() { resumeInterval(); }); var myVar = setInterval(function() { myFunction(); }, 6000); }); </script>
-
Hi, I would like to ask if anyone can help me. I am trying to create a carousel slideshow with GSAP. I don't know if my approach is right. But, so far I have managed to create something. The problem i have is when the user Hovers on the slides. I want the animation to stop on-mouse-enter, and I want the animation to restart on-mouse-leave. I am sliding images from Right to Left, when user hovers on the slide animation stops which is good. However, if user hovers on the slide while the slide has not finished sliding completely to the Left, 2 images are visible. Please see the slideshow in this link. Hover on the slideshow to see. https://universeyachting.co.uk/test/ <body> <div class="container"> <div class="col-12" style="border: #000 1px solid;"> <div id="parentWrapper" class=""> <div id="prevButton" class="button">Prev</div> <div id="sliderImages"> <img src="img/slider1.png" class="img-responsive"><img src="img/slider2.png" class="img-responsive"><img src="img/slider3.png" class="img-responsive"><img src="img/slider4.png" class="img-responsive"> </div> <div id="nextButton" class="button">next</div> <div class="overlay"></div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <script> $(document).ready(function() { /* We have 4 images! on each click we move <div> by -1170 to left using the x:property Each time we click the next button, we want to move an additional -1170 pixels because our image is 1170px width */ var slideWidth = $("#parentWrapper").outerWidth(); var $sliderImg = $("#sliderImages"); var $nextButton = $("#nextButton"); var $prevButton = $("#prevButton"); CSSPlugin.defaultTransformPerspective = 800; //transformOrigin:"center top" GIVES flipping down from the top EFFECT $nextButton.click(function() { tl = new TimelineMax(); var y = $sliderImg.css("transform").split(', ')[4]; var xVal = parseInt(y); console.log("xVal is :: " + xVal); if(isNaN(xVal) == true ) { // this is TRUE, when page loads and user clicks PREV first time // We want the click on nextButton to move images on > right side. // First, we move the image all the way far to the Left. On each Next lick, we can move image to right // At every 4th Click, we rewind to x: 3510px. tl.to($sliderImg, 2, {x: -slideWidth*3}); // Moves elemetn to x: -3510px } if (xVal == -slideWidth*3 ) { tl.to($sliderImg, 1, {x: -slideWidth*2}); // 1170*2 = } if (xVal == -2*slideWidth ) { tl.to($sliderImg, 1, {x: -slideWidth}); // Moves element to -1170px } if (xVal == -slideWidth ) { tl.to($sliderImg, 1, {x: 0}); } if (xVal == 0 ) { tl.to($sliderImg, 1, {x: -3*slideWidth}); } }); $prevButton.click(function() { t2 = new TimelineMax(); var y = $sliderImg.css("transform").split(', ')[4]; var xVal = parseInt(y); console.log("xVal is 1 :: " + xVal); if(isNaN(xVal) == true ) { // this is TRUE, when page loads and user clicks PREV first time // @ this point, the 1st frame of the image-slip is visible. t2.to($sliderImg, 1, {x: -slideWidth}); } if (xVal == -slideWidth ) { t2.to($sliderImg, 1, {x: -2*slideWidth}); } if (xVal == -slideWidth*2 ) { t2.to($sliderImg, 1, {x: -3*slideWidth}); } if (xVal == -3*slideWidth ) { t2.to($sliderImg, 1, {x: 0}); } if (xVal == 0 ) { t2.to($sliderImg, 1, {x: -slideWidth}); } }); t3 = new TimelineMax({repeat:2, repeatDelay:4}); TweenMax.set(".overlay", {z: 150}); TweenMax.fromTo( ".overlay", 1, { skewX: 30, scale: 1.5 }, { delay: 1, skewX: 0, xPercent: 100, transformOrigin: "0% 100%", ease: Power2.easeOut } ); t3.to($sliderImg, 1, {x: -slideWidth, delay:5}); t3.to($sliderImg, 1, {x: -slideWidth*2, delay:5}); t3.to($sliderImg, 1, {x: -slideWidth*3, delay:5}); var $wrapElmnt = $("#parentWrapper"); $wrapElmnt.mouseenter(function(){ t3.pause(); }); $wrapElmnt.mouseleave(function(){ t3.play(); }); }); </script>