Search the Community

I've seen a lot of posts about trying to create a marquee section similar to the one on Cuberto's home page. I'm trying to recreate the marquee but the animation seems to "jump" when looping. I'm thinking my math maybe off in the modifier callback? EDIT: Inspecting the dom elements it seems the row items are overflowing the row slightly possibly because of whitespace generated from using inline-blocks.

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(); }); });