Jump to content
Search Community

Setting SteppedEase repeat in TimelineMax

jlo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
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 comment
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 comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...