Search the Community

// Parent Component export default function ParentComponent() { const [title, setTitle] = useState('values'); const changeContent = (title) => { setTitle(title); } const bgRef = useRef(null); const mainRef = useRef(null); const bgTransitionRef = useRef(null); useEffect(()=>{ const tl = gsap.timeline(); tl.fromTo(bgTransitionRef.current, {y: 0, skewY: 0}, {y: "-120vh", skewY: 4, duration: 1.2, ease: "power4.inOut"}) .fromTo(bgRef.current, {filter: "brightness(3) grayscale(150%)"}, {filter: "brightness(1) grayscale(0%)", duration: 1.2}) .fromTo(mainRef.current, {y: 150, autoAlpha: 0}, {y: 0, autoAlpha: 1, duration: 1.2, ease: "power3.inOut"}, "<0.5") }) return ( <div className="parent-component"> <img className='bg-background' src="/assets/clouds.png" ref={bgRef} /> <div className="bg-transition" ref={bgTransitionRef} ></div> <ChildComponent changeContent={() => changeContent('values')} /> <div/> ) } // Child Component export default function ChildComponent(props) { return ( <div className="child-component" onClick={props.changeContent}> <h4>{props.title}</h4> </div> ) } Alrighty, so what's happening is that whenever I click the ChildComponent, it should run a function called 'changeContent'. It does change the content when I click it. But what it also does is that it restarts all of the GSAP animations. Why is it doing this? And how can I prevent it from happening?

Hi there! I have a question about how timelines are managed in GSAP 3. While a timeline's animation is running, in the js console I seem to be able to use: gsap.globalTimeline.restart(); If the animation has finished it ignores the restart completely. I can only get it to restart if call it while it's running. The project is a game, this is a particular scene, where I will need to restart the timeline and set a different player (between 1 and 4). Also as we're looking to use VUE.js as a single page application I expect will need a master timeline per scene. It's a bit complicated and a client/work related so I can't post it on codepen. If I can get this working and convince the team to use it then definitely interested in becoming a green sock member. There's nothing as powerful as GSAP for timeline management so definitely need to get this working. It's also worth mentioning during the script I can log the variables for the timelines I've created (tl) when the script runs, but not after it's finished running. Please ignore primarily what the animations are doing - as they're working well (it's a responsive scene of a player jumping over a bar then crying when they lose lol). It's mostly just being able to reset / rewind etc the main timeline and each other individual ones. As I can't seem to get either to work. $(document).ready(function () { var pCurrentPlayerNumber = 1; var currentplayer = ".player" + pCurrentPlayerNumber; var currentplayerwrapper = ".player" + pCurrentPlayerNumber + "-wrapper"; console.log(currentplayer); console.log(currentplayerwrapper); var tlSetStage = gsap.timeline(); tlSetStage.set(currentplayer, {className: "+=visible"}) .set(currentplayerwrapper, {className: "+=centercenter"}) .set(".currentplayername", {className: "+=p" + pCurrentPlayerNumber + "-bg"}) .set(currentplayerwrapper, {transform: "translateZ(200px)"}) .set(".highjump-set.fg", {transform: "translateZ(400px)"}) .set(".highjump-set", {className: "+=centercenter"}) .set(".highjump-set", {xPercent: 300}); var tl = gsap.timeline(); tl.set(currentplayerwrapper, {xPercent: -300, yPercent:-50}) .set(".highjump-set", {xPercent: 300}) .set(currentplayer, {className: "+=stancePlayerRunFast"}) .to(currentplayerwrapper, {xPercent: "+=200", yPercent:-50, duration: 1, delay:1}) .to(".highjump-set", {xPercent: "-=280", yPercent:-50, duration: 1, delay:0},1) .set(currentplayer, {className: "-=stancePlayerRunFast"}) .set(currentplayer, {className: "+=stancePlayerJump"}) .to(currentplayerwrapper, {xPercent: "+=50", rotationY:-180, yPercent:-50, duration: 0.5}) .to(".highjump-set", {xPercent: "-=10", yPercent:-50, duration: 1, delay:0},2) .set(currentplayer, {className: "+=aniPlayerPaused"}) .to(currentplayerwrapper, {xPercent: "+=10", rotationY:-180, yPercent: -80, rotationZ: 50, ease: "power4.Out", duration: 0.5}) .to(".highjump-set", {xPercent: "-=20", yPercent:-50, duration: 1, delay:0},3) .to(".highjump-pole-hoz", {xPercent: "+=70", yPercent:"+=330", duration: 0.5, delay:0},3) .to(".highjump-pole-hoz", {yPercent:"-=190", duration: 0.5, delay:0},3.5) .to(".highjump-pole-hoz", {xPercent: "+=20", yPercent:"+=220", duration: 0.5, delay:0},4) .to(currentplayerwrapper, {xPercent: "+=20", rotationY:-180, yPercent: -20, rotationZ: 100, ease: "power4.Out", duration: 0.5},4) .to(".highjump-set", {xPercent: "-=20", yPercent:-50, duration: 1, delay:0},4) .to(currentplayerwrapper, {xPercent: "+=20", rotationY:-180, duration: 2}) .set(currentplayer, {className: "-=stancePlayerJump"}) .to(currentplayerwrapper, {xPercent: "+=20", rotationY:-180, rotationZ: 0, duration: 0.5}) .set(currentplayer, {className: "-=aniPlayerPaused"}) .set(currentplayer, {className: "+=stancePlayerCry"}) .to(currentplayerwrapper, {rotationY:-180, rotationZ: 0, duration: 2}); console.log(tl); }); If I try to restart them using the below command I get a not defined error. Should I be doing each timeline as a function? tl.restart(); or tlSetStage.restart(); Ideally if I can at least just get the master timeline to reset at this stage it would be a win. Being able to reset individual timelines would also be great. Any help very much appreciated!

Hi. I am new to GSAP and before getting into my query let me first congratulate you guys for such an amazing library and well written documentation! Despite this, I am having some difficulties whenever I try to restart a timeline containing a Splittext tween as seeing in the codepen url. On the first pass (play button), Splittext splits the text as expected and proceeds with he rest of the animation without a problem. During the replay, the text is already under the format required (i.e. chars, words, or lines) but is not being displayed, which I believe relates to the setting of the properties of "text2__hidden" class, and animated. I have tried multiple iterations of the code to no avail. I even attempted resetting the position of the elements manually (as I successfully achieved with a svgMorph tween within the same timeline -not shown on the codependency extract) and quickly discovered how complex this would be given the characteristics of that particular tween (several parameters being animated and some of these include cycles). What am I missing? Thanks,

Hi guys, I'm having an issue with restarting a master timeline with nested timelines and understanding to how properly clear props from elements. Basically, I have svg that uses symbols that have inline transforms on them applied when exporting from Illustrator. I'm animating x and y values. Then on btn click, I would like to completely restart and reset the animation and elements transform to initial values. The issue is that when I clear all props or just transform, it's removing the inline transform values that are coming from svg. But I would want to revert them back to initial state. Is there a way to achieve it? Hope my demo is helpful enough to show. Thank you!

I have an element that is by default set to opacity:0 and then first set to 0.5 and then to 1 via GSAP. When I use a label for the timing the element is not reset to 0 but to a random (?) number somewhere between 0.3 and 0.5. Does restart() not reset all parameters? Thanks!

Hey! Longtime user, sometime-poster. I'm working on some ads that have a replay button. I have a secondary animation that plays at the beginning of my main timeline. That secondary animation is generated by a function that returns a timeline, and is called using add(). Secondary animation looks something like this: function makeWaves() { var tl = new TimelineLite(); tl .add('start', 0) .fromTo('#wave1 .teal', 10, {drawSVG:"0 35%"}, {drawSVG: "0% 95%"}, 'start') .fromTo('#wave1 .navy', 10, {drawSVG:"35% 100%"}, {drawSVG: "95% 100%"}, 'start') .fromTo('#wave2 .blue', 10, {drawSVG:"0 30%"}, {drawSVG: "0 90%"}, 'start') .fromTo('#wave2 .navy', 10, {drawSVG:"30% 100%"}, {drawSVG: "90% 100%"}, 'start') .to('#wave3 .blue', 10, {drawSVG: "80%"}, "start") .to('#wave3 .navy', 10, {drawSVG: "70%"}, "start+=2"); return tl; } Main timeline looks like this: this.timeline .addLabel("start", 0) .to(this.miranda, 0.6, {autoAlpha: 0}, 3.5) .add("f1", 3.7) .add(makeWaves(), "f1") //... more awesome animation When I hit the replay button, which calls timeline.restart(), my secondary animation doesn't fire. I tried setting timeline.restart(false, false) to avoid suppressing callbacks, but no dice. I also tried using exportRoot(), but I've never really been 100% sure how that works. Maybe I'm misunderstanding the use-case for this feature? Anything jump out at you guys that I might be missing? This seems implausible, but any reason using drawSVG would be part of the problem? I might try to put up a CodePen, but this is agency work, which is NDA'd by default, so I don't think I can share it publicly. Thanks guys!

Hi all, Im having trouble triggering my 'slideshow', i got the basics working with the timeline, but whenever i restart it, the 'x : ''-='' doenst add the amount, but starts from the previous x value. I have a 'activeCount' variable running, which disables the buttons when the max amount of slides is reached. This part works fine in the console, but ofcourse not really visible when the timeline isn't working correctly. Can someone help me with this? Cheers.

Hello, I have a tween that appears on click of an object fades in and starts to rotate infinitely with repeat = -1. When I kill that tween and then re-click the object and and the tween re-starts it adds to the duration from the previous tween, so everytime I click and it begins to rotate its duration += previous-duration+duration Code that fades in and starts to rotate object TweenMax.to([".planet1UI>img"], 0.8, { autoAlpha: 1, delay: 1.5, onComplete: function() { TweenMax.to(".planet1UI>img", 4, { rotation: 360, ease: Linear.easeNone, repeat: -1, transformOrigin: "50% 50%" }); } }); code that removes the rotation TweenMax.set([".planet1UI>img", ".planet2UI>img"], { autoAlpha: 0 }); TweenMax.killTweensOf([".planet1UI>img", ".planet2UI>img"], { rotation: true, transformOrigin: true }); TweenMax.killChildTweensOf(".planet1UI"); TweenMax.killChildTweensOf(".planet2UI"); TweenMax.killAll(); So every time I restart the rotation it is 4seconds slower Any ideas? I will add an codepen soon.

Hi there, i have a timelineMax with many animations added. when i click a button i want reset the timeline and add completly new animations to the timeline so i do: timeline.clear() timeline.to(myAnimation) timeline.restart() unfortunately some svgs are stuck in the middle of the former Animations, because the restart/clear doesnt wait till the end of those animation, but interrupts them. How can i wait till the current animation has finished and then restart/clear? Im not at the end of the timeline so timeline.progress() is not an option. Thank you

I have a button which starts an animation. What I want to do is restart the animation if the user pushes the button during an existing animation. The code below just stops the tween for a split second then continues the existing animation. myTween = TweenLite.to( circle, 1, { opacity: 0, attr: { r: 12, }, ease: Power2.easeIn, onStart: reset, onComplete: reset, onOverwrite: () => myTween .restart() } )

Hi, Im having troubles with the restart, is missing the "first line" and dont is the same at start, the line tl.to("#imagen1", 6, { scale:1.2,alpha:1 , ease: Power0.easeOut }, "1"); doesnt work when i repeat it. Do you know why, or how to fix this error?? (function () { //TWEENS var tl = new TimelineLite({ //onComplete:rewind onStart:go1, onComplete:rewind }); tl.timeScale(1); //tl.from("#logo",0, { scale:0.0, alpha:0, ease: Power2.easeOut }, "=0"); //tl.addLabel("cartela1"); tl.from("#imagen1",1, { scale:1.0, alpha:1, ease: Power2.easeOut }, "0"); tl.from("#textomira1",1.5, {color:"#ffffff", ease: Power2.easeOut }, "0"); tl.from("#texto1",1, { alpha:1, ease: Power2.easeOut }, "0"); tl.from(".marki",0, {backgroundColor:"#ffffff",color:"#ffffff",fontWeight:"normal", ease: Power2.easeOut }, "0"); tl.to("#imagen1", 6, { scale:1.2,alpha:1 , ease: Power0.easeOut }, "1"); tl.to("#textomira1",0.5, {color:"#000000", ease: Power2.easeOut }, "1"); tl.from("#textomira2",0, {color:"#ffffff", ease: Power2.easeOut }, "7"); tl.to("#textomira2",1, {color:"#000000", ease: Power2.easeOut }, "2"); tl.to(".marki",0.5, {backgroundColor:"#000000",color:"#ffffff",fontWeight:"bold", ease: Power2.easeOut }, "3"); tl.addLabel("cartela2"); tl.to("#texto1", 2, { alpha:0 , ease: Power2.easeOut }, "5"); tl.to("#imagen1", 2, { scale:1.22, alpha:0 , ease: Power0.easeOut }, "5"); tl.from("#imagen2",2, { scale:1, alpha:0, ease: Power0.easeOut }, "5"); tl.to("#imagen2",5, { scale:1.15, alpha:0, ease: Power4.easeOut }, "5"); tl.to("#imagen2",2.5, { alpha:1, ease: Power0.easeOut }, "5"); tl.from("#texto2",3, {alpha:0, ease: Power2.easeOut }, "6"); tl.addLabel("cartela3"); tl.to("#texto2", 2, {alpha:0 , ease: Power2.easeOut }, "10"); tl.to("#imagen2", 2, { alpha:0 , ease: Power2.easeOut }, "10"); tl.from("#imagen3",4, { alpha:0, ease: Power2.easeOut }, "10"); tl.from("#texto3",2, {alpha:0, ease: Power2.easeOut }, "10"); tl.from("#comprar",0.5, { alpha:1, ease: Power2.easeOut }, "10"); tl.from("#comprar2",0.5, { alpha:1, ease: Power2.easeOut }, "10"); tl.from("#comprarespacio",0.5, { alpha:0, ease: Power2.easeOut }, "10"); tl.addLabel("cartela4"); tl.to("#comprar",0.5, { alpha:1,bottom:"-100%", ease: Power2.easeOut }, "12"); tl.to("#comprar2",0.5, { alpha:1,bottom:"0%", ease: Power2.easeOut }, "12"); function go1(){ tl.gotoAndPlay(1); } function rewind(){ tl.restart(); } }()); Thanks in advance!

I have a button that when clicked, triggers my timeline to play. There is no delay on start and on the first click it works fine. On subsequent clicks, it takes time for the animation to start. Any idea what I'm doing wrong? I've tried triggering the animation with just TL.restart() and also having an onComplete function that sets the timeline's progress to 0 and pauses it. Any idea how I remove that delay on subsequent clicks? Code here: var tl = new TimelineMax({paused: true, onComplete: resetTl}); TweenMax.set('.fab', {perspective: 200}) tl.to('#sendplane', 1, {rotation: -20, opacity: 0, x: '+=100', ease: Elastic.easeIn.config(1, .9), onComplete: resetPlane}) .to('.fab', .25, {scale: 1.2, boxShadow: '0px 7px 15px rgba(0,0,0,0.1)'}, '-=.8') .to('.fab', 2, {rotationY: -360, ease: Elastic.easeIn.config(1, .9)}, '-=1.8') .fromTo('.checkmark', .5, {drawSVG: '0%'}, {drawSVG: '100%'}) .to('.fab', 2, {rotationY: 360, ease: Elastic.easeIn.config(1, .9)}) .to('.checkmark', .2, {opacity: 0}, '-=1.1') .to('#sendplane', 1, {x: '+=100',opacity: 1}, '-=.4') .to('.fab', .25, {scale: 1,boxShadow: '0px 0px 5px rgba(0,0,0,0.3)'}) function resetPlane(){ TweenMax.set('#sendplane', {x:'-=200', rotation: 0, opacity: 1}) } function resetTl(){ tl.progress(0) tl.pause() } document.getElementById('fab').addEventListener('click', function(){ tl.play() //I've also tried tl.restart() and it still has a delay. })

I think this library is awesome and works great! Thanks for taking the time to make it So I am building a page that when you click on a button, a bunch of photos will fade and scale down into random positions in a container. I have made three different timelines for each group of photos that will incrementally increase in speed until the last group which will slow back down again. The animation is smooth and works great. My problem is I have created a button that will slide out when that last timeline finishes. When someone clicks on it, I want to be able to just replay the entire animation again. However, it will only play the first timeline over and stop, it won't read my callback within that timeline to move to the next timeline. Not sure why it's doing this since I added the false parameter to suppress events. I'm sure there is a better way with TimelineMax to do what I have done, but this is my first time working with GSAP. Sorry, I won't be able to recreate this in a codepen. Thank you for any help you can provide! Here is my code: var groupOne = $('.group-one .photo_item'), groupTwo = $('.group-two .photo_item'), groupThree = $('.group-three .photo_item'), currentItem = 0, rotateValues = ["-20deg", "20deg", "-10deg", "10deg", "0deg"], widthOffset = 100, heightOffset = 300, containerWidth = $('.photos').width() - widthOffset, containerHeight = $('.photos').height() - heightOffset, tl = new TimelineMax(), tlTwo = new TimelineMax(), tlThree = new TimelineMax(); Draggable.create($('.photo_item'), {type:"x,y", edgeResistance:0.2 }); $('.js-btn').one('click', function(){ beginGroupOne(); }); $('.js-restart-btn').on('click', function() { restartTimeline(); }); function beginGroupOne() { groupOne.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupOne, 1.25, { force3D: true, scale:1, autoAlpha:1, ease: Expo.easeOut }, .5, 0) .addCallback(beginGroupTwo, "-=.7"); } function beginGroupTwo() { groupTwo.each(function(index, element) { tlTwo.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tlTwo.staggerTo(groupTwo, .75, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .3, 0) .addCallback(beginGroupThree, "-=.5"); } function beginGroupThree() { groupThree.each(function(index, element) { tlThree.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tlThree.staggerTo(groupThree, .25, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .1, 0, showRestartBtn); } function showRestartBtn() { $('.js-restart-btn').addClass('is-active'); } function restartTimeline() { tlTwo.pause(0).invalidate(); tlThree.pause(0).invalidate(); tl.restart(false, false); } function getRandomRotate() { return rotateValues[Math.floor(Math.random() * rotateValues.length)]; } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }

I have created a "pulse" animation using two staggerTo animations on TimelineLite. Initial play works well. However, restarting the timeline (on hover) plays all animations at once. I suspect it ignores initial delay values created by staggerTo? What am I doing wrong? Is there a better way to create this animation?

Hi everyone, like you can see in the codePen I'm working on something like an app-onboarding. It's one of my first "serious" TweenMax project and I'm still not a pro so maybe you can see some errors somewhere, but my question is another. Like you can see at the end I would restart the entire animation, but I made it with a main timeline and some secondary timelines (some are nested inside the main one, some are external). Like you can see if you try to restart the animation more than one time something is going wrong, and I cannot understand why because in you check the "onComplete" function I set the other timeline to the beginning using "tlLeaving.play(0)". What am I doing wrong? Thanks!

I'm new to GSAP so I'm sure I'm doing something wrong. I have the beginning of a game I'm working on: www.giebler.com/IMS/iWin/Game/Game2.html (My graphic designer hasn't animated the avatar yet). While working on it, a tap or click of the mouse executes tl.restart() so I can repeat the animation. However, after a few restarts, the avatar stops at the bridge for several of the timeline events, but eventually jumps to the end. Can someone look at my source (above URL) and tell me what I'm doing wrong? Thanks!

deleted

Hi there. I've been searching on this site and haven't been able to find anything to solve my problem but I should mention I'm no expert. I've been working on banner ads (was used to working with Flash but now using HTML5) and I want to be able to make the banners repeat but ONLY TO A CERTAIN POINT. I've attached some very simplified code to give an idea of what I'm talking about. I'm using 'restart' to repeat the banner but I want the animation to only repeat once and to stop at a certain point in the case below I want it to stop where the cta fades in, i.e., the third to last line of the timline lite. Here's the code: var tl = new TimelineLite({onComplete:bannerRestart}); tl.to(copy1, .5, {alpha:1, ease:Linear.easeNone},"+=.7") .to(copy1, .3, {alpha:0, ease:Linear.easeNone},"+=2.5") .to(copy2, .5, {alpha:1, ease:Linear.easeNone},"+=.3") .to(cta, .5, {alpha:1, ease:Linear.easeNone},"+=1") .to(copy2, .3, {alpha:0, ease:Linear.easeNone},"+=2.5") .to(cta, .5, {alpha:0, ease:Linear.easeNone},"-=.3") function bannerRestart() { tl.restart(); } If anyone could help I'd be very thankful!!

The issue: When replaying the SplitText animation, some of the letters on the right are not starting the animation straight away. Instead of sliding in as they are supposed to, they are already positioned and only start the animation from there. This doesn't happen when the animation plays for the first time, only when revisiting the first slide after paging through the other slides. This happens in Firefox, Opera and IE latest version.

Hello all ! I'm new to the greensock API, and therefore also new to the forum ! Well, first of all, I'd like to congratulate for the great job, the APIs are awesome ! I'm also just getting started in AS3, as I've always been using AS2 so far, but that's another subject... After a couple days, I think I'm aleady getting things to work nicely, so I'm pretty pleased with the quality of the platform, it makes AS3 look easy ! I got a nice animation playing, with tweens nested in timelines, all nested in one master timeline, I named masterTimeline. In the end, a button allows to restart the animation, so it triggers masterTimeline.restart() The thing is, some of the tweens don't play. I'm really puzzled by the following : //sequence 1 var barongteterot1:TimelineLite = new TimelineLite(); barongteterot1.append(new TweenLite(barong, 0.9, {rotation:-30, ease: Linear.easeOut})); //rotate barongteterot1.append(new TweenLite(barong, 0.9, {rotation:0, ease: Linear.easeOut})); //rotate back barongTimeline.appendMultiple([ new TweenLite(barong, 1.8, {x:-30, y:145, ease: Quad.easeInOut}), new TweenLite(barong, 1.8, {scaleX:0.6, scaleY:0.6, ease: Linear.easeOut}), barongteterot1]); //sequence 2 var barongteterot2:TimelineLite = new TimelineLite(); barongteterot2.append(new TweenLite(barong, 0.9, {rotation:30, ease: Linear.easeOut})); barongteterot2.append(new TweenLite(barong, 0.9, {rotation:0, ease: Linear.easeOut})); barongTimeline.appendMultiple([ new TweenLite(barong, 1.8, {x:470, y:125, ease: Quad.easeInOut, onComplete:swapDepth, onCompleteParams:[0]}), new TweenLite(barong, 1.8, {scaleX:0.2, scaleY:0.2, ease: Linear.easeOut}), barongteterot2]); //sequence 3 var barongteterot3:TimelineLite = new TimelineLite(); barongteterot3.append(new TweenLite(barong, 0.4, {rotation:-30, ease: Linear.easeOut})); barongteterot3.append(new TweenLite(barong, 0.4, {rotation:0, ease: Linear.easeOut})); barongTimeline.appendMultiple([ new TweenLite(barong, 0.8, {x:250, y:255, ease: Expo.easeIn}), new TweenLite(barong, 0.8, {scaleX:0.05, scaleY:0.05, ease: Linear.easeOut}), barongteterot3]); masterTimeline.insert(barongTimeline,"startbarong"); it plays perfectly, but when I restart the masterTimeline, the "rotate back" in sequence 1 won't play !! it's really puzzling as sequence 2 and 3 are constructed in the same way and have no problem what so ever ! I managed a work around, triggering the rotate back in a function called with onComplete, but I'd really like to understand, mostly. maybe other parts of my code are interfering (although I doubt it), but if anyone has an idea of what's happening here, I'd appreciate an explanation or any lead to a start of an explanation. Cheers all !

Is there any way I can reduce the size of TweenLite's footprint within my Flash banner? On publish, Actionscript 2.0 Classes make up 20K of my 32K banner. I'm not doing anything crazy here, just fading in/out and moving up/down. I tried using TweenNano...file size was GREAT. But I couldn't figure out how to make my banner repeat only two times, since there is no "repeat" or "restart" features like there are in TweenLite. Am I importing something that I don't need? Here's my AS2.0 TweenLite Code: // import the tween engine import com.greensock.*; import com.greensock.easing.*; ////////////////////////////////////////////////////////////////////////// // define the timeline var timeline:TimelineLite = new TimelineLite({onComplete:repeat}); // define repeat function variables var nPlays = 0; var totPlays = 2; // repeat timeline if played less than three times function repeat() { if (nPlays < totPlays) { timeline.restart(); nPlays++; } } ////////////////////////////////////////////////////////////////////////// // get your tween on timeline.appendMultiple([ TweenLite.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5}), TweenLite.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5}), TweenLite.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5}), TweenLite.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5}), TweenLite.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3}), TweenLite.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5}), TweenLite.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5}), TweenLite.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5}), TweenLite.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5}), TweenLite.from(stall, 2, {_y:"10", delay:10})]); stop(); Here's my AS2.0 TweenNano code. File size is great, but I can't figure out how to make it repeat only twice. // import the tween engine import com.greensock.*; import com.greensock.easing.*; ////////////////////////////////////////////////////////////////////////// // define repeat function variables var nPlays = 0; var totPlays = 2; // repeat timeline if played less than three times function repeat() { if (nPlays < totPlays) { //initBanner.start(); initBanner(); nPlays++; } } ////////////////////////////////////////////////////////////////////////// function initBanner({onComplete:repeat}) { //the issue is with this line TweenNano.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3, overwrite:0}); TweenNano.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5, overwrite:0}); TweenNano.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5, overwrite:0}); TweenNano.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(stall, 2, {_y:"10", delay:10, overwrite:0}); } initBanner(); stop();