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.

Thanks for the replies; I did this in the end. Putting a pause function on the timeline, where I wanted it to stop. til = new TimelineMax({repeat:3, repeatDelay:0.1}); .to(root.Tag_01, 1.00, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0) .call(function() {if (!til.loop) til.loop = 1; if (til.loop++ == 2) til.pause()}) .to(root.Fader, 0.75, {alpha:1, ease:Sine.easeInOut, overwrite: false}, 12.50)

Hi Okay hopefully simple. var til = new TimelineMax({repeat:5, repeatDelay:0.1}) til.from(this.UW1, 0.5, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 0.1) .to(this.UW1, 0.5, {alpha:0, scaleX:1.05, scaleY:1.05, ease: Sine.easeInOut, overwrite: false}, 5) .from(this.UW4, 0.65, {alpha:0, scaleX:0.95, scaleY:0.95, ease: Sine.easeInOut, overwrite: false}, 5) .to(this.UW4, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 9) What I want to do, is on the final play of the loop to stop at 5 seconds, ie NOT do the fade out at 9 seconds. Is this possible in a simple manner? I presume there is a counter that the repeat is accessing, and I just guess I"m not sure how to implement an if command within the timeline as well. Thanks in advance.

That was it!!! Thanks.

This is driving me mad, I have a simple Timeline, that works pretty well, except for some reason after I fade a MC out, I want to fade it back in later in animation/timeline and it just won't animate, instead it just appears/jumps back straight to 100%. I'm lost on why it wont or how to fix it. (or what even to search for in terms of reanimating the same thing later in the TL/ var til = new TimelineLite(); // til.to(this.WB01, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 1.5) .to(this.Logo, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 2) .to(this.WB02, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 2) .to(this.WB03, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 2.8) .from(this.Logo_Final, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 6) .to(this.WB02, 1.00, {alpha:100, ease: Sine.easeInOut, overwrite: false}, 6) // - this is the line .from(this.CTA, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, "-=0.5") Any help or a push in the right direction would be much appreciated.

Hi, there are numerous reasons for this. It's just a lot easier when you're dealing with multiple people working on it, to have a timeline that you can scrub through as not everyone can see things in the "matrix" of code. It might be clunky and I agree that it would be better to create it all on one frame but it has actually been fine for quite some time, (but that might be because they haven't displayed multiple ads before, or no one noticed!)

Hi Thanks. It's not just when it's the same ad though, it kinda happens when there are multiple files as well. This isn't quite the same, but it does that funky weird animation on the banners if you scroll too fast or scroll back etc, whereas if you stop and reload on the relevant banner it will work as intended. It's very weird, it's like when there are multiple requests to the code that it get's mixed up. I suppose if there's anyway to confine it somehow? I'm not sure at all. http://ckj2017.businesscatalyst.com/index.html

Thanks. Here is the Adobe Animate files as well as the ZIP It would seem that some calls are being made and it's causing all sorts of confusion somewhere, 970x250.fla 205 Brand_970x250_A_ENG_SHOP.zip

Hi I have a very strange thing occurring that is happening in a live environment. I have created a couple of banners with greensock that play fine by themselves, but when there are more than a couple on a page and you scroll to them, it seems to mess them up, they get all funky in the way they load or run the animations. Like I said, run individually they seem fine, but it's just when you scroll on an page to them, that for some reason they seem to start acting erratically. In this instance it seems they have used the same ad three times, but you can see what happens by the time you scroll to the third, the animation speeds up etc. https://dl.dropboxusercontent.com/u/12920477/ck_205.mov Anyone have any ideas or how to deal with this?

I have a load of animations happening, using Tweenmax in Flanimate. TweenMax.from(root.logo_mc, 1.00, {alpha:0, delay:1, force3D:true, ease:Sine.easeInOut, overwrite:false}) TweenMax.from(root.pink_mc, 1.50, {rotation: 54, delay:1.5, force3D:true, ease: Back.easeOut.config(1), overwrite:false}) TweenMax.from(root.photo_mc, 0.50, {alpha:0, delay:2.0, force3D:true, ease:Sine.easeOut, overwrite:false}) TweenMax.from(root.photo_mc, 1.00, {rotation: -34, delay:2.0, force3D:true, ease: Back.easeOut.config(1), overwrite:false}) TweenMax.from(root.photo_necklace_mc, 1.50, {alpha:0, delay:2.4, force3D:true, ease:Sine.easeInOut, overwrite:false}) TweenMax.from(root.earings_mc, 1.50, {alpha:0, x:195, delay:3.1, force3D:true, ease:Sine.easeInOut, overwrite:false}) TweenMax.from(root.necklace_mc, 1.50, {alpha:0, x:195, delay:3.6, force3D:true, ease:Sine.easeInOut, overwrite:false}) However I'd like to now move all these items up 15px, rather than create another eight lines of text, how can I add all these to an array and then animate that array by moving it say 20pixel higher? Thanks in advance.

I figured it out, was just a syntax error. -thanks.