Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
phsims

Problem with timeline skipping

Recommended Posts

Hi all,

 

I have made an dynamic infinite slider containing animated text for a WP theme but am having some problems.  The slider itslef works fine but trying to use a back button on the slider is causing problems.  For some reason when I hit 'back' the first slide works OK but then on the second slide the text animation skips, then a while later the one of the functions (the one that moves the position of the of screen image) fails to fire and everything goes out of sync.  I have tried reversing, play/pause and a bunch of other things but nothing seems to work.

 

The JS is below and a version of the slider can be found at http://pm.demosite.me.uk/

jQuery(window).load(function(){ 

	var tl1 = new TimelineMax();
	var tl2 = new TimelineMax({onComplete: upDatePosition});
	var tl3 = new TimelineMax();
	var imgArray = [];
	var contentArray = [];
	var headArray = [];
	var subArray = [];
	var pArray = [];
	var imgLength = 0;
	var photoContWidth = 0;
	var imgWidth = 0;
	var n = jQuery("#ffslider li").length;
	var endArray = (n - 2) * '100' + '%';
	var picWidth = jQuery(window).width();
	var nextBtn = jQuery("button#next");
	var prevBtn = jQuery("button#last");
		
		
	//alert(imgLength);
		function setDefaults(){
		  // number of images
		  imgLength = jQuery('#ffslider li img').length;
		  
		  // Full % width of slider
		  photoContWidth = (imgLength * 100) + '%';

		  //looping through the image length and putting a button and assoc name attr to the btn
		  for(var i=0; i<imgLength; i++){
				jQuery('#ffslider li').eq(i).attr('id',i);
				jQuery('.slidercontent').eq(i).attr('name','slidecontent'+i);
				jQuery('.slidercontent h3').eq(i).attr('class','slidehead'+i);
				jQuery('.slidercontent h4').eq(i).attr('class','slidesub'+i);
				jQuery('.slidercontent p').eq(i).attr('class','slidep'+i);
					
				jQuery('#ffslider li').eq(i).css('left', (i * 100) + "%");
				jQuery('.slidercontent').eq(i).css('left', (i * 100) + "%");
				jQuery('.slidercontent h3').eq(i).css('left', (i * 100) + "%");
				jQuery('.slidercontent h4').eq(i).css('right', (i * 100) + "%");
				jQuery('.slidercontent p').eq(i).css('left', (i * 100) + "%");
			  
				imgArray.push(jQuery('#ffslider li').eq(i));
				contentArray.push(jQuery('.slidercontent').eq(i));
				headArray.push(jQuery('.slidercontent h3').eq(i));
				subArray.push(jQuery('.slidercontent h4').eq(i));
				pArray.push(jQuery('.slidercontent p').eq(i));
					
		  } 
			startAnimation();
		}




		function startAnimation(){

			tl1.to(contentArray, 0.1, {autoAlpha:1})
			.add(TweenMax.to(headArray, 0.5, {left:"20" + '%', autoAlpha:1}))
			.add(TweenMax.to(subArray, 0.5, {left:"30" + '%', autoAlpha:1}))
			.add(TweenMax.to(pArray, 0.5, {left:"40" + '%', autoAlpha:1}))
			.add(TweenMax.to(headArray, 0.5, {left:"-100" + '%', autoAlpha:0, delay:3}))
			.add(TweenMax.to(subArray, 0.5, {left:"100" + '%', autoAlpha:0}))
			.add(TweenMax.to(pArray, 0.5, {left:"-100" + '%', autoAlpha:0}));

			endAnimation();
		}



		function endAnimation(){
		
			tl2.to(imgArray, 1, {left:'-=100' + '%', delay:7})
			.to(contentArray, 0.1, {left:'-=100' + '%'});
			
		}

		function upDatePosition(){
			for( var i=0; i<imgLength; i++){
				if((imgArray[i].css('left') <= '-picWidth')){
				
				  imgArray[i].css("left",  (n - 1) * '100' + '%'); 
				  
				} 
				if((contentArray[i].css('left') <= '-picWidth')){
				
				  contentArray[i].css("left",  (n - 1) * '100' + '%'); 
				} 
			}
		  startAnimation();
		}
		
		
		function backDatePosition(){
			for( var i=0; i<imgLength; i++){
				if((imgArray[i].css('left') >= (n - 1) * '100' + '%')){			
					imgArray[i].css("left",  '-100%'); 
				}
				if((contentArray[i].css('left') >= (n - 1) * '100' + '%')){			
					contentArray[i].css("left",  '-100%'); 
				}
			}
			tl3.to(imgArray, 0.1, {left:'+=100' + '%'}).to(contentArray, 0.1, {left:'+=100' + '%'});
			startAnimation();
		}
		setDefaults();
		
		
	nextBtn.click(function(){
		tl1.totalTime( tl1.totalDuration() );
		tl2.totalTime( tl2.totalDuration() );	
	});

	prevBtn.click(function(){
	
		tl1.totalTime( tl1.totalDuration() );

		tl2.seek(0);
		backDatePosition();
		
	});
		


});
Link to post
Share on other sites

Did you ever get a resolution to this? I noticed the link you provided is dead (at least for me). If you're still having trouble, a simple codepen or jsfiddle would be super helpful. 

Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×