Angus13 Posted December 8, 2022 Share Posted December 8, 2022 Hey all! I think it should be super simple, but I can't seem to figure out how to play the first animation of the timeline when the last animation starts if timeline is repeating. In the codepen, I'd like the text to just fade in/out flashing "text one"/"text two" without that gap after "text two" (ie the timeline finishing and restarting). I've added "<" to the first animation to position it to start when the previous (ie the last) animation starts. Thanks for any help! See the Pen BaVbNNx by Areid13 (@Areid13) on CodePen Link to comment Share on other sites More sharing options...
Angus13 Posted December 8, 2022 Author Share Posted December 8, 2022 Just seems to be a logic thing. Shuffled the order so the timeline started and ended with "text one" opacity: 1 Link to comment Share on other sites More sharing options...
Solution Carl Posted December 8, 2022 Solution Share Posted December 8, 2022 Hi and welcome to the GreenSock forums, Thanks for the clear demo. It seems you found an alternate solution but this could work too See the Pen GRGeJYX?editors=1010 by snorkltv (@snorkltv) on CodePen This allows the text-1 to fade in from the start. Note I set the opacity of all h1 tags to opacity:0 in the css. This removes the flash of un-styled content and makes the looping cleaner as I implemented it using the label. You could also approach this using a special stagger technique but I don't want to throw too much at you if you're just starting and you're comfortable with your solution. 3 Link to comment Share on other sites More sharing options...
Angus13 Posted December 8, 2022 Author Share Posted December 8, 2022 Brilliant, thanks a heap @Carl! If you've the time & would like, I'd be keen to see/learn how the stagger approach would work. Link to comment Share on other sites More sharing options...
Carl Posted December 8, 2022 Share Posted December 8, 2022 I have a blog post here https://www.snorkl.tv/greensock-staggers-with-seamless-loops/ with full video tutorial and multiple demos. Notice in the demo below that item 4 animates out while item 1 animates back in See the Pen ExVEOPa by snorkltv (@snorkltv) on CodePen 2 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