Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
jlo

Setting SteppedEase repeat in TimelineMax

Recommended Posts

Quick question: how would we set a repeat for a SteppedEase animation that's sitting inside a timeline?

 

I noticed today that the repeat I had in this sample of code wasn't having any effect:

var t1 = new TimelineMax();
t1.from("#object1", 5, { backgroundPosition: "500px 0px", ease:SteppedEase.config(5), repeat: 2, repeatDelay: -0.5 } )
t1.from("#object2", 5, { backgroundPosition: "500px 0px", ease:SteppedEase.config(5), repeat: 3, repeatDelay: -0.5 } )

Is there another way to declare the repeat, or would it be better off creating a set of functions that can set the repeat?

Link to post
Share on other sites

The shorthand timeline methods (timeline.to(), timeline.from() etc) always create TweenLite instances, which don't support repeat (it doesn't change if it's a TimelineLite or TimelineMax).

 

You can add TweenMax tweens directly if you need the TweenMax features in a tween:

var t1 = new TimelineMax();
t1.add( TweenMax.from("#object1", 5, { backgroundPosition: "500px 0px", ease: SteppedEase.config(5), repeat: 2, repeatDelay: -0.5} ) );
t1.add( TweenMax.from("#object2", 5, { backgroundPosition: "500px 0px", ease: SteppedEase.config(5), repeat: 3, repeatDelay: -0.5} ) );
  • Like 3
Link to post
Share on other sites

Ah, got it, that makes much more sense.

 

Thanks Jamie  :)

Link to post
Share on other sites

Alright Jamie, one last quick question (sorry  ;) ). What's the best way to make these Tweens in the timeline appear/disappear?

 

What I mean specifically is, I've set the css of the objects involved with 'visibility:hidden' and then changed it back to visible in the GS timeline, but I've got a delay on them, and the objects are just sitting there statically until the delay time is up, then animating, if that's a clear enough description.

 

So with something like this:

var t12 = new TimelineMax();
t1.add( TweenMax.from("#object1", 1, { backgroundPosition: "500px 0px", ease: SteppedEase.config(5), repeat: 5, repeatDelay: -0.5, visibility: "visible", delay: 2} ) );

... 'object1' just sits on screen, then after 2secs will animate. I'm trying to set it so the object doesn't appear until after 2secs, then disappears again off-screen once it's done.

Am I better off putting a stagger in of some kind?

 

Thanks in advance  :)

Link to post
Share on other sites

sure, TweenLite.from() and fromTo() tweens by default have immediateRender:true. In this case you want to use immediateRender:false to stop them rendering until the right time.

 

If you're using the timeline shorthand methods though, the default is immediateRender:false.

Link to post
Share on other sites

Ah, great, thanks Jamie.

 

Implemented it, but I think I'm still doing something wrong...

 

So my script looks like this now:

var t1 = new TimelineMax();
t1.add( TweenMax.from("#object1", 1, { immediateRender: false, visibility: "visible", backgroundPosition: "500px 0px", ease: SteppedEase.config(5), repeat: 2, repeatDelay: -0.5, delay: 5} ) );
t1.add( TweenMax.from("#object2", 1, { immediateRender: false, visibility: "visible", backgroundPosition: "500px 0px", ease: SteppedEase.config(5), repeat: 4, repeatDelay: -0.5, delay: 5} ) );
  
t1.repeat(-1)

... and the 'immediateRender is definitely working - thanks for the heads-up on that too btw - but what it does now is:

  • not show either object
  • then play object1, after which it disappears
  • then play object 2, after which it disappears
  • then both objects appear on screen statically until the whole thing starts again
  • each object remains onscreen statically until its animation starts again

I tried adding something like:

t1.to("#object1", 0.1, {visibility: "hidden"} );
t1.to("#object2", 0.1, {visibility: "hidden"} );

... to the end of the timeline, just before the repeat but that didn't do the trick. Am I missing something really simple here?  :(

Link to post
Share on other sites

Argh, don't worry, got it - just needed to set the object's visibility to hidden at the start of the timeline, so when it looped back around it was reset back to being unseen.

 

Just inserted:

t1.set("#object1, #object2", {visibility: "hidden"} )

... into the first line of the timeline, that fixed it  :oops:

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×