barrowman

let til = gsap.timeline () //-------------------- let nested = gsap.timeline(); nested.to(this.Light, {duration: 1, x: 235}); til.add(nested, "+=3"); //add nested timeline after a 3-second gap //--------------------- til.add("one", 0.0) .add("two", 3.5) .add("three", 4.0) .add("four", 7.5) .add("five", 8.0) .add("six", 11.5) .add("seven", 12.0) .add("eight", 15.5) .add("nine", 16.0) //--------------------- .to(this.Sparkle, {duration:15.5, rotation:-720, ease:Linear.easeIn}, "one") //--------------------- .to(this.one, {duration:3.5, x:160, ease:Linear.easeIn}, "one") .to(this.one, {duration:0.5, x:460, ease:Linear.easeOut}, "two") .from(this.two,{duration:0.5, x:-160, ease:Linear.easeOut}, "two") //--------------------- .to(this.two, {duration:3.5, x:160, ease:Linear.easeIn}, "three") .to(this.two, {duration:0.5, x:460, ease:Linear.easeOut}, "four") .from(this.three,{duration:0.5, x:-160, ease:Linear.easeOut}, "four") //--------------------- .to(this.three, {duration:3.5, x:160, ease:Linear.easeIn}, "five") .to(this.three, {duration:0.5, x:460, ease:Linear.easeOut}, "six") .from(this.four,{duration:0.5, x:-160, ease:Linear.easeOut}, "six") //--------------------- .to(this.four, {duration:3.5, x:160, ease:Linear.easeIn}, "seven") .to(this.four, {duration:0.5, x:460, ease:Linear.easeOut}, "eight") .from(this.five,{duration:0.5, x:-160, ease:Linear.easeOut}, "eight") //--------------------- .to(this.five, {duration:3.5, x:160, ease:Linear.easeIn}, "nine") I've simply trying to nest an animation into another timeline. I want a simple looping animation that run 5x and to put that into a existing timeline, but I can't figure out the correct syntax from the document. I've pasted the top bit in with the nesting, but it doesn't work. (this was just the first step to see if I could get the nesting to work, having never done it before) Any simple advice to get this to work? Thanks in advance.

Thanks for the help! Updated the code to the new version of CreateJS and it now works, which is huge relief if I have to change any of the existing files. Thanks again - phew.

Hi, thanks. it's virtually just an old file that worked fine before GSAP3/AnimateCC2020 came out. I haven't changed anything. I can play things fine that were exported back in October, but now if I open any of those files and export they just do nothing... <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.5_23b0de6da0ee295131e32a500470610c_min.js"></script> There is this error in the console, which is NOT there on the same file that was exported back in October (before Animate 2020) Uncaught TypeError: this._renderFirstFrame is not a function at new lib.exit (file:///Volumes/McElements/Dropboxes/Dropbox%20(Personal)/ICP_DIGITAL/2019/Diageo/JW/JW2565_KBA%20Campaign/_ICP_Master_Assets/H5%20Standard%20Banners/160x600_Red%20copy/160x600_KBA_Red.js:140:7) at new lib._160x600_KBA_Red (file:///Volumes/McElements/Dropboxes/Dropbox%20(Personal)/ICP_DIGITAL/2019/Diageo/JW/JW2565_KBA%20Campaign/_ICP_Master_Assets/H5%20Standard%20Banners/160x600_Red%20copy/160x600_KBA_Red.js:404:14) at handleComplete (file:///Volumes/McElements/Dropboxes/Dropbox%20(Personal)/ICP_DIGITAL/2019/Diageo/JW/JW2565_KBA%20Campaign/_ICP_Master_Assets/H5%20Standard%20Banners/160x600_Red%20copy/160x600_KBA_Red.html:45:15) at file:///Volumes/McElements/Dropboxes/Dropbox%20(Personal)/ICP_DIGITAL/2019/Diageo/JW/JW2565_KBA%20Campaign/_ICP_Master_Assets/H5%20Standard%20Banners/160x600_Red%20copy/160x600_KBA_Red.html:28:52 at a.b._dispatchEvent (createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js:12) at a.b.dispatchEvent (createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js:12) at a.b._sendComplete (createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js:15) at a.b._loadNext (createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js:15) at a.b._processFinishedLoad (createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js:15) at a.b._handleFileComplete (createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js:15) This is the file, annoyingly I don't have access to the old version of Animate on my new machine, thanks to Catalina and I'm a bit rusty with all the backend code as I've literally been using the same export profile since GS put up the introductory tutorial a few year back now. Any help is greatly appreciated. Download 600kb Animate Source File

Hi, I've just opened a file I had on a new computer with a fresh install on Animate 2020, used to run fine last time I opened it (and animate) two months ago (based off a longer running export profile from a tutorial here years ago). But new version and I don't know if new GSAP change but I'm just getting a blank window. Can anyone shed any light on if there has been changes and things I'll need to do to my files now to get them to run? I'm pretty much lost on what to do. Kind regards William

replayBtn.onclick = function() { til.invalidate().restart(); } //----------------------- til = new TimelineMax({repeat:3, yoyo:true}); //----------------------- til.add("one", 0.1) .add("two", 2.5) .to(root.Image01, 10, {scaleX:1.10, scaleY:1.10, ease:Sine.easeInOut, overwrite: false}, "one") .to(root.Image02, 10, {scaleX:1.10, scaleY:1.10, ease:Sine.easeInOut, overwrite: false}, "one") .from(root.Byline, 1, {alpha:0, ease:Sine.easeInOut, overwrite: false}, "two") .from(root.CTA, 1, {alpha:0, ease:Sine.easeInOut, overwrite: false}, "two+=0.5") When I click on the button nothing happens. I know i'm missing something obvious, but I've realised I've never actually added a non-Exit button in Animate before and I'm not sure what I'm missing from this...

Thanks, that's kinda of what I was thinking, I don't want to overkill code for the sake of it (as I'm too dumb for that! ) and replace 5 lines of code with some 15 line function. Thanks.

That's awesome, thank you so much!!!

til = new TimelineMax({repeat:0, repeatDelay:0.1}); //----------------------- var GlowingBalls = [root.Lights.GlowBall1, root.Lights.GlowBall2, root.Lights.GlowBall3, root.Lights.GlowBall4, root.Lights.GlowBall5, root.Lights.GlowBall6, root.Lights.GlowBall7, root.Lights.GlowBall8, root.Lights.GlowBall9, root.Lights.GlowBall10, root.Lights.GlowBall11, root.Lights.GlowBall12, root.Lights.GlowBall13, root.Lights.GlowBall14, root.Lights.GlowBall15, root.Lights.GlowBall16, root.Lights.GlowBall17, root.Lights.GlowBall18, root.Lights.GlowBall19, root.Lights.GlowBall20]; //----------------------- til. .staggerTo(GlowingBalls, 0.75, {alpha:0.1, ease:Bounce.easeInOut, overwrite: false, repeat:30, yoyo:true}, 0.12, 0) Is there a way to make this array simpler and more flexible? Right now it works pretty much as it should in the Stagger. But if I needed to add another 40-odd glowing balls for example, it might be a little cumbersome. In the old AS days you could create a [n] type thing, and create an array up to a value you specified, but I'm more than rusty on AS, which translates to pretty much clueless on how to do this in JS for Flanimate to work with Greensock. Thanks again

.to(root.Bokeh5, 3.70, {x:-300, ease:Sine.easeInOut, overwrite: false}, "one+=0.9") .to(root.Bokeh4, 4.80, {x:-270, ease:Sine.easeInOut, overwrite: false}, "one+=0.7") .to(root.Bokeh3, 6.70, {x:-290, ease:Sine.easeInOut, overwrite: false}, "one+=0.8") .to(root.Bokeh2, 5.50, {x:-330, ease:Sine.easeInOut, overwrite: false}, "one+=0.9") .to(root.Bokeh1, 5.20, {x:-290, ease:Sine.easeInOut, overwrite: false}, "one+=0.5") This is some of my code in Animate. I'm not sure whether there is a better way to do this, where I have five MCs that I want to pan across a screen at more or less the same time and speed, but not exactly. I know I could have done a Stagger but then the movement and times would have been identical and movement uniform. Is it possible to do a stagger type thing that's a little less uniform? Thanks in advance.

How do you create a codepen for an Adobe Animate file?

Okay, my ignorance again is a stumbling block and buzzkill. I can't see what I'm doing wrong here but it's just looping from the start each time. til = new TimelineMax({repeat:3, repeatDelay:0.0, onComplete:playAfterBuild}); //----------------------- til.add("one", 3.5) .add("two", 6.0) .add("three", 8.5) .from(root.Image_01, 2.00, {y:550, ease:Sine.easeOut, overwrite: false}, 0.0) -- THIS IS THE ONE OFF ANIMATION THAT I DONT WANT TO REPEAT .to(root.Brand_01, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one") .to(root.Tag_01, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one") .to(root.Image_01, 0.09, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one") //------------- .from(root.Brand_02, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one") .from(root.Tag_02, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one") .from(root.Image_02, 0.09, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one") //--------------------- .to(root.Brand_02, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two") .to(root.Tag_02, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two") .to(root.Image_02, 0.09, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two") //---------------------- .from(root.Brand_03, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two") .from(root.Tag_03, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two") .from(root.Image_03, 0.09, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two"); //----------------------- function playAfterBuild() { til.play("one")// };

Now you're just showing off - Thanks that's really cool.

Oh wow, awesome thanks, this is really helpful.

Hi, Is there a way to loop a Timeline but only say from after a certain point in the original timeline. I'd like to loop an animation, but only after the initial build, so ie after the timeline is finished, restart it again at 3 seconds. I suppose I could just make two separate timelines at worst but wondered if there was a way to do this within one timeline. Thanks. //----------------------- //til = new TimelineMax(); til = new TimelineMax({repeat:3, repeatDelay:0.1}); //----------------------- til.from(root.Image_01, 2.00, {y:550, ease:Sine.easeOut, overwrite: false}, 0.0) //------------------------------ .to(root.Brand_01, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0) .to(root.Tag_01, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0) .to(root.Image_01, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0) //------------- .from(root.Brand_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0) .from(root.Tag_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0) .from(root.Image_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0) //--------------------- .to(root.Brand_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0) .to(root.Tag_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0) .to(root.Image_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0) //---------------------- .from(root.Brand_03, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0) .from(root.Tag_03, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0) .from(root.Image_03, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0) //---------------------

I'm looking to create what seems like areasonably simple animation. I have a timeline with a few animations, but what I want to do is have some simple looping/yoyo of a number of mcs (mimicing lights on a Christmas tree) going on, whilst this is all happening. Is this all possible within a simple TL, as I'm stuck on how to have thirty odd, throbbing animations running (at different time offsets) whilst the rest of the TL is running. Thanks in advance.