pre-end label in gsap timeline repeat

[eden]

Hi there.

Im searching the forum to find the most elegant way to repeat a timeline, but with a nice fading effect on last repeat.
Im aware we can define repeat parameters on timeline object, and i like that idea.
tl = gsap.timeline({repeat:3, repeatDelay:2});
 

But this will also repeat the last label of timeline, witch typically is a fade out effect, so the animation can start again from a blank state.
example:
.add("cleanRepeatFrame","+=2")
.to([txt1,txt2,txt3logos,cta ... etc], .5, {alpha:0}, "cleanRepeatFrame")

 

 So far i've been doing workarounds like trying to stop timeline before we reach last label in last repeat loop. But this seems not clever at all.

example of my workaround:

.add(function() { r++; if (r>3) { tl.pause();    }}, "+=0")

.add("cleanRepeatFrame","+=2")

 

So im just adding a function before cleanRepeatFrame, that checks loop number (r variable is just assuming we started from 0, and i need to manualy adjust it on how many loops the timeline got. (sub question - any way to get the loop number from timeline object ?)

 

So general question would be, is there any better / cleaner way to code such functionality.
Would adding onRepeat: to timeline object be a nicer approach ?

 

Best regards.

 

[OSUblake]

Hi eden,

 

Some other ways can include using something like tweenFromTo or maybe just building your animation from function calls. And of course you could use a for loop to do the .add() calls. 

 

See the Pen dyZvYqr by GreenSock (@GreenSock) on CodePen

 

[Carl]

In addition, and similar too @OSUblake's advice here are 2 variations on "custom end screens" from my courses.

Note both animations loop with a simple fade out but end with the call to action flashing in green. I keep the design simple so that the code is easier to decipher.

 

Use a callback to check how many times animation has played and call a function that plays a separate animation (not in the timeline)

See the Pen poeEmWP by snorkltv (@snorkltv) on CodePen

 

Create full animation iteration in one timeline. Use tweenTo() and tweenFromTo() in a master timeline to scrub through the original timeline any number of times. After the iterations are all done play an additional end animation in the master timeline

See the Pen XWMpNBz?editors=0010 by snorkltv (@snorkltv) on CodePen

 

 

[OSUblake]

Nice, I didn't even think about doing a repeat.

 

 

[eden]

Guys, those are some great examples !

I had no idea we can use tl.tweenFromTo from 0 to a specific label 🤯 will definitely experiment with that ! (now I wonder what else I dont know with gsap 🤔 - is there any hidden array that stores all objects that appeared on specific label perhaps ? So we could do .to(LABEL, .5, {alpha:0})  )

 

Adding separate function also seams clever and universal.
Thanks for hints! Will hit back if i scramble some code i like best ❤️

[OSUblake]

24 minutes ago, eden said:

is there any hidden array that stores all objects that appeared on specific label perhaps ? So we could do .to(LABEL, .5, {alpha:0})  )

 

Unfortunately no. Labels really don't keep track of anything. They're more like a timestamp, and GSAP just looks up that time to add stuff to. You can log out the labels to see the times.

 

console.log(tl.labels);
console.log(tl.labels.myLabel);