Pause TimeLine, But Only After Animation Finishes

irfankissa · August 31, 2018

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>

See the Pen by test (@test) on CodePen

PointC · August 31, 2018

Hi @irfankissa

Welcome to the forum.

I think you could probably simplify things a bit here. You're creating a new timeline on each prev click, next click and mouseenter event. I would think one timeline (created outside of handlers) and 3 labels would be an easier approach. You could then prevent the mouseenter from pausing the timeline by using the isActive() method.

https://greensock.com/docs/TimelineMax/isActive()

For more info about labels:

https://greensock.com/position-parameter

It's difficult to offer assistance with a lot of pasted code and a live site. If you have other questions, could you please create a simplified demo? More info:

There are also numerous threads in the forum about sliders and carousels. If you use the search feature, you'll find lots of great info and demos.

Happy tweening.

irfankissa · August 31, 2018

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:

See the Pen qqmBjQ by jonathan (@jonathan) on CodePen

EDIT:

ok, i have managed to do what i wanted using native javascript setInterval(). The codepen link

See the Pen MqpXLO by irfanis (@irfanis) on CodePen

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>

Notifications

Messages

Pause TimeLine, But Only After Animation Finishes

Warning: Please note

Recommended Posts

irfankissa

Link to comment

Share on other sites

PointC

Link to comment

Share on other sites

irfankissa

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members