Search the Community

Hi there. First of all I want to thank you for such a great animation platform as GSAP. I am beginner in it, and I have some questions. I have a task to animate my card of product. First it's just drawing a path of svg patterns. Second when onHover event is fired Iwant to put it up and put down them and drawing them in reverse direction simultaneously. More you can see on codepen link. I have done it, but when I call hover event in during the first animation, my svg path is cut. Why? What's wrong with it? I pin screen of bug http://joxi.ru/82QMg35TGO9b2d

I know this is a bit off topic but i wanted to know is there anyway to do this? I'm creating a animation editor and i used GSAP for tweens and timeline,and I want users to be able to export animation as video and download them.

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

Hello Does anyone know of a way to tween/animate the updating of the progress attribute? Right now it seems to just jump to that point. I'm currently using: myTimline.progress(myProgress); Thanks

Hello, I have TimelineMax with multiple instance of TweenMax on it. One of the instances has onComplete that calls itself. I need that to simulate random movements. When I pause TimelineMax everything gets paused except the TweenMax that has onComplete. I kind of get why it is happening but is there way to pause onComplete call? Thanks