barrowman

Members
  • Content count

    31
  • Joined

  • Last visited

Community Reputation

4 Newbie

About barrowman

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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...
  2. barrowman

    Simplify a lot of similar movement...

    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.
  3. barrowman

    Create an array for a stagger in Flanimate

    That's awesome, thank you so much!!!
  4. 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
  5. .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.
  6. barrowman

    Loop a timeline but only from a later point.

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

    Loop a timeline but only from a later point.

    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")// };
  8. barrowman

    Loop a timeline but only from a later point.

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

    Loop a timeline but only from a later point.

    Oh wow, awesome thanks, this is really helpful.
  10. 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) //---------------------
  11. 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.
  12. 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)
  13. 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.
  14. 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.