Jump to content
Search Community

Timeline repeat: Play first animation when last animation starts

Angus13 test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

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

  • Solution

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.

  • Like 3
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...