Search the Community

Hello! I'm trying to animate a looping sprite sheet as I scroll through a section, using ScrollTrigger. Essentially, like this amazing example by Redis: https://www.redis.agency/. They seem to rely on Lottie, so perhaps using the Lottie Helper for ScrollTrigger would be a better solution? Here are some insights: My sheet is made of 60 frames, and I'm animating the background-position of my sprite element using ScrollTrigger, but would like to control the rest using CSS: position, size and style of the sprite I would love to have some form of control on how much scroll to do for one full completion of the sprite sheet, as the sections I'll be scrolling through can have very different heights I would like the sprite sheet to keep animating for as long as I can scroll within its parent element. The sprites are looping! Ideal solution would be being able to say that a full sprite completion should be X00 VH long and the animation should reset the background position every time it reaches this threshold, and to do so for as long as I can scroll in the parent. Say the parent element is 600vh and I declare a variable of 200vh for a full completion of my sprite sheet; the sprite should be able to loop three times within this parent. I'm very new to GSAP and have been loving the little things I've been able to do so far, but it's seems I've hit a wall and would appreciate any guidance Resources I have tried on the forum: Thank you!! #EDIT: here's an updated codepen where I got the looping part fixed, but the animation loop is way too fast and I can't seem to control that: https://codepen.io/thomasbosc/pen/oNadjRO

I'm trying to loop through an array of elements (it could be images or paragraphs) and create the same tween for each one of them. But i wanna do it the right way (the efficient, readable and clean way) In this article (https://css-tricks.com/tips-for-writing-animation-code-efficiently/) the author does some loops examples in tip #7 but he doesn't add all the tweens in a single timeline… So, i’m wondering if this is the way to do it? function createTween(element) { return gsap.from(element,{ //animations }) } function createTimeline() { const images = document.querySelectorAll("img"); const tl = gsap.timeline(); [...images].forEach(element => { tl.add(createTween(element)) }) return tl; } createTimeline() thanks in advance

Good afternoon, colleagues! Please tell me, in the solution below, for some reason, sometimes there is a "twitching" of the line that moves. Moreover, in my project - it sometimes "jerks" (as if it starts anew every time, and does not continue) - uploaded to codepen.io - everything works stably, nothing jumps. With what it can be connected? How to make the RIGHT implementation? Sincerely.

Hey everyone, I've not had to give too much thought in the past to how I structure timelines, but I think it's going to be important on an upcoming project so would like some advice on how to tackle it. The animation is broken in to three steps, it should play but loop at the end of each step (almost in a passive state) until the user chooses to proceed to the next step. The user can also choose to play one of the three steps of the animation via navigation / buttons. All elements of the animation exist within a single provided SVG. Each scene will need to do different things to those same elements. So for example in step one I'll fade a key element in, in step two that same element might move off to the side. What would be the best way to tackle this? I've had two thoughts on how to approach it. Single Timeline Create a single (huge) timeline. Then add timeline labels at strategic points which should allow me to control which portion of the animation to play. Then figure out how to loop the last portion of each section until there is a user interaction such as clicking a 'next' button, or allowing them to choose a different step like above. Multiple Timelines Create a single global timeline. Then add separate timelines for each 'scene'. This should allow me the same control as above but keep the file cleaner as I can break the animation in to smaller chunks. Which of these is the better pattern to take, or is it worth doing it completely differently? Does anyone have examples of something similar? I've been looking around and found some examples but nothing seems to be quite like the above. Any help would be appreciated! Thanks Sam

I'm making an animation that pulses and has a circle that grow. I got the pulse and growing, but I can't seem to make it loop nicely. Anyone got any ideas? I have a reference video, but it is to big to upload unfortunately. Thanks in advance Edit: codepen is changed to the finished animation

Hey! So I have a timeline loop that should loop infinitely, each new timeline has a negative offset to keep the loop from having a gap at the beginning of each timeline I can achieve the desired effect by adding the same timeline with negative delay multiple times ( lots of timeline.add(anim(), "-=3") ) But for some reason today I can't wrap my brain around how to do this nicely? I have tried various things, negative repeatDelay, onComplete set time() / progress(), but none of them quite work. Something like 2 timelines and the second one loops forever sounds like the right way to do it? Please look at the codepen and all should be made clear, on each 'repeat' of the master timeline there is a gap Thank you in advance ? I'm so sure it's something really simple that I'm overlooking!?!

I have divided my home page into 4 divs with the class of ".div-pics". And my goal is everytime you hover on one of them a description appears /with the class of ".div-desc". The animation happens through Greensock TimelineLite and the initial position of the description divs is "top: 100%". The code I currently have works, but not with the desired effect. Right now once you hover any of the divs (.div-pics), all description divs (.div-desc) will appear. Instead I would like only the hovered div's description to come on screen, but I don't know how to target it. ! I have divided my home page into 4 divs with the class of ".div-pics". And my goal is everytime you hover on one of them a description appears /with the class of ".div-desc". The animation happens through Greensock TimelineLite and the initial position of the description divs is "top: 100%". The code I currently have works, but not with the desired effect. Right now once you hover any of the divs (.div-pics), all description divs (.div-desc) will appear. Instead I would like only the hovered div's description to come on screen, but I don't know how to target it. <div id="home-about" class="div-pics div-left"> <h1 class="div-title">About</h1> <div class="div-desc dl"> <div class="div-arrow"> <div class="arrow-part arrow-top"></div> <div class="arrow-part arrow-bottom"></div> </div> <p class="div-text dt-left"> Lorem ipsum ... </p> <li class="div-link"><a href="#">Order parts</a></li> </div> </div> function loopDivs() { divArray.forEach(div => { div.addEventListener("mouseover", showDetails); function showDetails() { tlDetails = new TimelineLite(); tlDetails .to(".div-desc", 0.5, { top: "0%" }); } }); } event.target - instead of ".div-desc" won't work since in my case I can't hover the .div-desc, because it is sent all the way down and it's invisible. My idea is to hover its parent and then it would appear. Thanks in advance!

I am having problem to understand how to bind multiple animations into one variable which is in nest timelines. What I would like to achieve is a looping variables like this codepen: But with multiple animations for one/first variable (box1Timeline) like this, mentioned by @OSUblake Kindly assist, thank you!

Hi there guys! can you please help me I am struggling how to code the animation for it properly with my 4 separated frames images. I want to animate it smoothly and nicely like normal cyclist. Here's my code for animating 4 framed images. JavaScript: window.onload = init; function init() { TweenMax.set("#two, #three, #four", {alpha: 0}); animationOne(); } function animationOne() { TweenMax.to("#one", 0, {alpha: 0, delay: 1}); TweenMax.to("#two", 0, {alpha: 1, delay: 1}); TweenMax.to("#two", 0, {alpha: 0, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 1, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 0, delay: 1.2}); TweenMax.to("#four", 0, {alpha: 1, delay: 1.2}); TweenMax.set("#one", {alpha: 1, delay: 1.3}); TweenMax.set("#two, #three, #four", {alpha: 0, delay: 1.3, onComplete: animationTwo}); } function animationTwo() { TweenMax.to("#one", 0, {alpha: 0, delay: 1}); TweenMax.to("#two", 0, {alpha: 1, delay: 1}); TweenMax.to("#two", 0, {alpha: 0, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 1, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 0, delay: 1.2}); TweenMax.to("#four", 0, {alpha: 1, delay: 1.2}); } HTML: <div id="cyclist"> <img id="one" src="https://s32.postimg.org/inysw8m2d/wiggins_01.png"/> <img id="two" src="https://s32.postimg.org/ip8qpnnw5/wiggins_02.png"/> <img id="three" src="https://s32.postimg.org/c0279n2k5/wiggins_03.png"/> <img id="four" src="https://s32.postimg.org/j4k0io9th/wiggins_04.png"/> </div> CSS: img { position: absolute; left: 10px; top: 10px; bottom: 0; right: 0; } For full editing please go here: http://codepen.io/Waren_Gonzaga/pen/PzEzag Kindly fork my pen and please revise. It really helps me to figure out how to make a code for this animation.

Hi, I’m having problems re-initialising the properties of a Timeline (Codepen url attached) On start, the plane should animate in form the left (-300) This only seems to work on the initial playthru. i've looked at Clearprops, invalidate() and a few other ideas, but nothing seems to fix it so far. Any suggestions welcome Thanks

Hey guys, Just wondering if there is an easier way to first start a loop, then stop it. Let's start with this: //Single object loop function doTween():void { TweenLite.to(mc, 1, {rotation:"348", ease:Linear.easeNone, onComplete:doTween}); } doTween(); //Stop loop TweenLite.killTweensOf(mc); //Multiple object loop function doTween():void { TweenLite.to(mc_01, 1, {rotation:"348", ease:Linear.easeNone, onComplete:doTween}); TweenLite.to(mc_02, 1, {rotation:"348", ease:Linear.easeNone}); TweenLite.to(mc_03, 1, {rotation:"348", ease:Linear.easeNone}); } doTween(); //Stop loop TweenLite.killTweensOf(mc_01); TweenLite.killTweensOf(mc_02); TweenLite.killTweensOf(mc_03); If there are heaps of objects looping, is there an easier way to stop them all (like by stopping the function somehow)? Also in case 2, let's just say there is a grandfather clock swinging. You can't use the above method because it needs to go back and forth. function tilt_right() { TweenLite.to(mc, 1, {_rotation:30, onComplete:tilt_left, } ); } function tilt_left() { TweenLite.to(mc, 1, {_rotation:-30, onComplete:tilt_right, } ); } tilt_right(); Once I want it to stop looping, what code would I use? I could possibly use the killTweensOf method again, but if each function had heaps of tweens, it seems like a clunky way of doing it. Thanks guys, Rhys.

Hello, I am new to greensock and my coding may be a bit of a mess however I have an urgent problem. I created an animation and want it to repeat infinitely, however, after the second loop the animation starts to become problematic. The animations start to fire randomly and don't play like they do the first time. If my explanation is unclear please tell me and i will clarify. I have spent 3 hours trying various different approaches to repeating the code and i cannot find a solution. here is the code. stop(); //import the GreenSock classes import com.greensock.*; import com.greensock.easing.*; import flash.events.MouseEvent; var nT:Boolean = new Boolean(); var mO:Boolean = new Boolean(); var debug:Boolean = new Boolean(); var masterTL:TimelineMax = new TimelineMax(); //CREATES TIMELINE masterTL.addLabel("Start", 0); //HIDES ALL OF LAYERS BY REDUCING ALPHA TO 0 masterTL.insertMultiple([TweenLite.to(Text_S1_mc, 0, {alpha:0, x:4.75, y:30.3}), TweenLite.to(chain_mc, 0, {alpha:0, x:265.5, y:-38.05}), TweenLite.to(takeCon_mc, 0, {alpha:0, x:2.9, y:10.7}), TweenLite.to(logoSm_mc, 0, {alpha:0, x:32.7, y:153.35}), TweenLite.to(todayTxt_mc, 0, {alpha:0, x:57.05, y:62}), TweenLite.to(sheen_mc, 0, {alpha:0, x:-41, y:150.4}), TweenLite.to(forF, 0, {x:600, y:176.6, alpha:0}), TweenLite.to(getYour, 0, {alpha:0, x:-2, y:-5.6}), TweenLite.to(pullHandle_mc, 0, {alpha:0, x:255.25, y:103.9}), TweenLite.to(pfEP, 0, {alpha:0, x:-5, y:84.1}) ]); masterTL.insert(TweenLite.delayedCall(1, Sc1St)); /**********************************************************************************************************************************************/ /************************************************************ SCENE 1 START *******************************************************************/ /**********************************************************************************************************************************************/ function Sc1St():void { if (debug == true){ trace("scene 1 begun"); }; //TEXT APPEARS masterTL.insert(TweenLite.to(Text_S1_mc, 1, {alpha:1})); //CHAIN AND HANDLE APPEAR AFTER DELAY masterTL.append(TweenLite.to(chain_mc, 0.5, {alpha:1}), 0.5); masterTL.append(TweenLite.to(pullHandle_mc, 0.5, {alpha:1}), -0.5); //MAKE HANDLE PULL DOWNWARDS masterTL.append(TweenMax.to(pullHandle_mc, 0.5, {y:124.9, repeat:1, yoyo:true, ease:Quad.easeOut, delay:1})); masterTL.append(TweenMax.to(chain_mc, 0.5, {y:-17.05, repeat:1, yoyo:true, ease:Quad.easeOut, onComplete:rTxt}), -1); }; //ROTATE AND MOVE TEXT OFF SCREEN function rTxt():void { //SPIN TEXT - LASTS 4.5 SECS masterTL.append(TweenMax.to(Text_S1_mc, 0.5, {scaleX:-1, x:239.25, repeat:8, yoyo:true, ease:Quad.easeInOut})); //MOVE TEXT, HANDLE AND CHAIN masterTL.addLabel("sc2St", 4.1); if (debug == true){ trace("scene 1 end"); }; /*WHEN FINAL TWEEN COMPLETES CALL SCENE 2*/ masterTL.insert(TweenLite.delayedCall(1, Sc2St)); }; /**********************************************************************************************************************************************/ /************************************************************ SCENE 1 ENDS ********************************************************************/ /**********************************************************************************************************************************************/ /**********************************************************************************************************************************************/ /************************************************************ SCENE 2 START *******************************************************************/ /**********************************************************************************************************************************************/ function Sc2St():void{ if (debug == true){ trace("scene 2 begun"); }; masterTL.insertMultiple([TweenLite.to(Text_S1_mc, 2, {y:400, alpha:0, ease:Quad.easeOut}), TweenLite.to(chain_mc, 2, {y:-300, alpha:0, ease:Quad.easeOut}), TweenLite.to(pullHandle_mc, 2, {y:-294, alpha:0, ease:Quad.easeOut}), TweenLite.to(logoSm_mc, 2, {alpha:1, delay:0.2}), TweenLite.to(takeCon_mc, 2, {alpha:1, delay:0.2}), TweenLite.to(todayTxt_mc, 2, {alpha:1, delay:0.2}) ],"sc2St"); masterTL.append(TweenMax.to(todayTxt_mc, 0.3, {scaleX:1.2, scaleY:1.2, x:38.85, y:55, repeat:1, yoyo:true, ease:Quad.easeInOut}),-1); if (debug == true){ trace("scene 2 end NEARLY"); }; masterTL.addLabel("sc3St", 10.5); masterTL.appendMultiple([ TweenLite.to(sheen_mc, 0.5, {alpha:0.6}), TweenLite.to(sheen_mc, 1, {x:255, ease:Quad.easeInOut}), /*WHEN FINAL TWEEN COMPLETES CALL SCENE 3*/ TweenLite.delayedCall(2, Sc3St) ]); }; /**********************************************************************************************************************************************/ /************************************************************ SCENE 2 ENDS ********************************************************************/ /**********************************************************************************************************************************************/ /**********************************************************************************************************************************************/ /************************************************************ SCENE 3 START *******************************************************************/ /**********************************************************************************************************************************************/ function Sc3St():void{ if (debug == true){ trace("scene 3 begun"); }; masterTL.insertMultiple([TweenLite.to(logoSm_mc, 2, {alpha:0}), TweenLite.to(todayTxt_mc, 2, {alpha:0}), TweenLite.to(takeCon_mc, 2, {alpha:0}), TweenLite.to(forF, 0, {x:24.65, y:176.6, delay:0.5}), TweenLite.to(logoSm_mc, 0, {x:78.5, y:40.4, scaleX:0.66, scaleY:0.66, delay:1}), TweenLite.to(getYour, 2, {alpha:1, delay:1}), TweenLite.to(logoSm_mc, 2, {alpha:1, delay:1}), TweenLite.to(pfEP, 2, {alpha:1, delay:1}), TweenLite.to(forF, 2, {alpha:1, delay:1}), ],"sc3St"); forF.addEventListener(MouseEvent.ROLL_OVER, overHandler); forF.addEventListener(MouseEvent.ROLL_OUT, outHandler); forF.addEventListener(MouseEvent.CLICK, clickHandler); function overHandler(event:MouseEvent):void { if (forF.alpha == 1 && mO == false){ masterTL.insert(TweenLite.to(forF, 0, {alpha:0.5})); mO = !mO; } else { //DO NOTHING } } function outHandler(event:MouseEvent):void { if (forF.alpha == 0.5 && mO == true){ masterTL.insert(TweenLite.to(forF, 0, {alpha:1})); mO = !mO }else{ //DO NOTHING }; }; function clickHandler(event:MouseEvent):void{ if (debug == true){ trace('click registered'); }; navigateToURL(new URLRequest("http://www.kegel8.co.uk/articles/pelvic-floor-exercise/how-to-do-kegel-exercises.html")); }; if (debug == true){ trace("scene 3 end"); }; masterTL.appendMultiple([ TweenLite.to(getYour, 0, {alpha:0, delay:5}), TweenLite.to(logoSm_mc, 0, {alpha:0, delay:5}), TweenLite.to(pfEP, 0, {alpha:0, delay:5}), TweenLite.to(forF, 0, {alpha:0, delay:5})]); masterTL.append(TweenLite.delayedCall(0, done)); } /**********************************************************************************************************************************************/ /************************************************************ SCENE 3 ENDS ********************************************************************/ /**********************************************************************************************************************************************/ //FIRES WHEN ALL ANIMATION IS DONE function done() { if (debug == true){ trace('im done'); }; masterTL.complete(); TweenLite.delayedCall(0, restartTheTimeline); } //RESTARTS THE TIMELINE function restartTheTimeline(){ if (debug == true){ trace("restart"); }; masterTL.gotoAndPlay("Start") }

Hi - I'm new to using greensock (and actionscript) and am trying to play around with some code I found. It originally loaded several swf files and looped through them continuously - I'm trying to randomize it. I have created an array and added code to shuffle through the array, but I'm stuck trying to integrate it into the looping files. I'm pretty sure I have to do something with the loaderIndex, but I'm not sure what. Any help would be great - thanks. Code: progress_mc.scaleX = 0; var loaderIndex:Number = -1; var currentLoader:SWFLoader; var urls:Array = ["SWF0.swf","SWF1.swf","SWF2.swf"]; var swfs:LoaderMax = new LoaderMax({onComplete:completeHandler,onProgress:progressHandler,onChildComplete:childCompleteHandler}); // Loop through urls and create a queue of swf loaders for (var i:Number = 0; i < urls.length; i++) { swfs.append( new SWFLoader(urls, {container:container_mc, autoPlay:false}) ); } urls.sort(randomSort); function randomSort(a:*, b:*):Number { if (Math.random() < 0.5) { return -1; } else { return 1; } } function progressHandler(e:LoaderEvent):void { progress_mc.scaleX = e.target.progress; } function childCompleteHandler(e:LoaderEvent):void { trace(e.target + " loaded"); e.target.content.visible = false; } function completeHandler(e:LoaderEvent):void { trace("all swfs loaded"); progress_mc.visible = false; initCurrentLoader(); addEventListener(Event.ENTER_FRAME, trackSWFPlayback); } function initCurrentLoader() { loaderIndex++; if (loaderIndex == swfs.numChildren) { //reset back to 0 if the last swf has already played loaderIndex = 0; } //dynamically reference current loader based on value of loaderIndex currentLoader = swfs.getChildAt(loaderIndex); //make the content of the current loader visible currentLoader.content.visible = true; //tell the current loader's swf to to play currentLoader.rawContent.gotoAndPlay(1); } function trackSWFPlayback(e:Event):void { //trace(currentLoader.rawContent.currentFrame); //detect if the loaded swf is on the last frame if (currentLoader.rawContent.currentFrame == currentLoader.rawContent.totalFrames) { trace("swf done"); //hide and stop current swf currentLoader.content.visible = false; currentLoader.rawContent.stop(); //set up and play the next swf; initCurrentLoader(); } } load_btn.addEventListener(MouseEvent.CLICK, loadSWFs); function loadSWFs(e:MouseEvent):void { load_btn.visible = false; swfs.load(); }

I have an infintie scrolling stack (actually its only 4 items looping) - and it's made up of a bunch of tweens, designed to seamless loop from progress 0-1, 0-1,0-1 and so on. So if I use tl = new TimelineMax({repeat:20}); It will play seamless. Eventually I want to swipe the stack and it just rolls continuesly until it has lost momentum... (think mobile browser scrolling - where you flick your thumb and it scrolls ahead smoothly) So I paused the timeline and test with a tweening. For instance I want to move the stack 8 positions (that is moving twice through the stack of 4 items) - and since I timed each stack move with a second it would be: TweenLite.to(tl, 1, {progress:8}); Naturally it wont tween progress beyond 1. Naively I briefly thought: TweenLite.to(tl, 1, {progress:8 % 1, ease:Expo.easeOut}); would work. But of course not - it isnt moving throught the stack twice So my question is is there a way of looping progress? I am thinking of doing the "progress modulu way" in an onUpdate. But I feel it isn't right tweening a vairable and using it in onUpdate - and won't it hurt performance? or I could use tl = new TimelineMax({repeat:20000}); and just tween the totalProgress or totalTime (if possible?) But is there a better and more propper way? TIA!

I have two videos of identical length that I need to play in sync. Occasionally they do loop in sync but are most often offset by some small amount. Unfortunately this is very noticeable in my application. example: video1.addEventListener(VideoLoader.VIDEO_COMPLETE, function():void { video1.gotoVideoTime(0, true); video2.gotoVideoTime(0, true); }); Any suggestions, please?

Trying to work out the following and would appreciate any advice. I have a timeline animation which covers 300 frames, the animation is of a spinning cube and when played in the flash IDE the animation runs in a seemly endless loop. I would like to control the animation frame using gs in order to utilise some of the easing functions and also tween from one frame to another (for example tween to frame 250 from frame 200) however there is something which I am having trouble getting my head around. If the timeline playhead is currently on frame 250 and I would like to tween to frame 2 how is this achieved without the playhead seemingly reversing (ie what is needed is for the tween to run to the end frame of the animation and then move to frame 2). Looking at the frame and frame label plugins for tweenlite the playhead moves forward and backward where I require the playhead to always move forward and got the first frame when it gets to the final frame and needs to continue.

Hi all, I am sure this is something that is quite simple, however I am a newbie and would like to know how I loop the following code so that my animation keeps repeating. Would I need to rewrite the whole thing? I am new to actionscript, greensock is amazing! import com.greensock.*; import com.greensock.easing.*; //Train tween TweenNano.to(train, 0.75, {x:400, ease:Quad.easeOut}); //Rotation 1 text tween in TweenNano.to(mc, 1, {x:20, ease:Quad.easeOut}); //Rotation 1 text tween out TweenNano.to(mc, 1, {delay: 3, x:800}); //Destination text tween in TweenNano.to(destination,1, {delay: 4,x:20, ease:Quad.easeOut}); //Speed text tween in TweenNano.to(speed, 1, { x:235, delay: 4, ease:Quad.easeOut}); //Speed text tween out TweenNano.to(speed, 1, {delay: 7, x:800}); //Price text tween in TweenNano.to(price, 1, {delay: 7, x:240, ease:Quad.easeOut}); TweenNano.to(booknow, 1, {delay: 7,scaleX:1, scaleY:1, alpha:1});