Setting SteppedEase repeat in TimelineMax

[jlo 3 Likes (Newbie)]

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?

[jamiejefferson 1,185 Likes (Superhero)]

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} ) );

[jlo 3 Likes (Newbie)]

Ah, got it, that makes much more sense.

 

Thanks Jamie 

[jlo 3 Likes (Newbie)]

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 

[jamiejefferson 1,185 Likes (Superhero)]

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.

[jlo 3 Likes (Newbie)]

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? 

[jlo 3 Likes (Newbie)]

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