Dima23 Posted March 31, 2023 Share Posted March 31, 2023 Hi, I'm trying to create loading animation and i want the text to float until dom has loaded and after that animation needs to play 3 more times. I'm new to this and the answer is probably super easy but I just can't figure this out, been trying to debug for hours. I'll be glad for any help. Thanks in advance. See the Pen Podvdby?editors=0010 by DimaProhorenko (@DimaProhorenko) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted March 31, 2023 Solution Share Posted March 31, 2023 Hi @Dima23 and welcome to the GreenSock forums! The problem here is that your loading text animation is an endless loop, so it never stops running. GSAP records everything at run time and then the master timeline (loadTl) is not updated so it has an endless animation running at the start. So it doesn't matter how many other animations you add after that, you'll never reach that point. See the issue? What you have to do is check on each repeat of the loading instance for a boolean that is toggled when the content is loaded, then repeat three more times and then create the other animation. In this case I wouldn't recommend to have both instances in the same timeline unless you use a label, but that could become a bit more cumbersome and confusing. This seems to be closer to what you intend to do: See the Pen dyqBPMz by GreenSock (@GreenSock) on CodePen I still added the other option I mentioned using the label, you can see the commented out code on each codepen and compare to see how it works: See the Pen MWqMYPy by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Dima23 Posted March 31, 2023 Author Share Posted March 31, 2023 Hi @Rodrigo thank you so much for your time and helping me out. Yeah I knew that the issue was my infinite animation, your solution has never crossed my mind though. I thought about having a counter but haven't got the time to try it out. Also could you point me to resources or explain why having two instances in the same timeline is a bad idea? So gratefull, hope one day I'll be able to help newcomers just like you. Link to comment Share on other sites More sharing options...
Rodrigo Posted March 31, 2023 Share Posted March 31, 2023 Hi, 1 hour ago, Dima23 said: Also could you point me to resources or explain why having two instances in the same timeline is a bad idea? In no case is a bad idea to have more than one instance in a timeline, but having an endless looping GSAP instance (Tween or Timeline) nested in another timeline with other instances can spell trouble, as you already found out I definitely should've phrased myself more precisely, sorry. Hopefully this clear things up. Happy Tweening! Link to comment Share on other sites More sharing options...
Dima23 Posted April 1, 2023 Author Share Posted April 1, 2023 @Rodrigooh yeah I get it, thanks again. Have a nice day 1 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