eden Posted February 8, 2022 Share Posted February 8, 2022 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. Link to comment Share on other sites More sharing options...
OSUblake Posted February 8, 2022 Share Posted February 8, 2022 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 2 Link to comment Share on other sites More sharing options...
Carl Posted February 8, 2022 Share Posted February 8, 2022 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 4 Link to comment Share on other sites More sharing options...
OSUblake Posted February 8, 2022 Share Posted February 8, 2022 Nice, I didn't even think about doing a repeat. 1 Link to comment Share on other sites More sharing options...
eden Posted February 9, 2022 Author Share Posted February 9, 2022 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 ❤️ Link to comment Share on other sites More sharing options...
OSUblake Posted February 10, 2022 Share Posted February 10, 2022 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); Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now