Nine Posted September 25, 2020 Share Posted September 25, 2020 Hey there people of the amazing animation world, I have a question about looping over children elements giving them a short animation and then ending it to continue to the next element and after all of them are done start over, I wanna do something similar this site has for their preloader, only that I inserted svg bars : https://homunculus.jp/ since the last forum post I posted helped me a lot to understand some concepts, I wanna continue learning more from more experienced people. See the Pen zYqbvBX by whitelionx (@whitelionx) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted September 25, 2020 Share Posted September 25, 2020 Hey @Nine Maybe this example of staggers on codepen can get you going into the right direction See the Pen HxzEl by GreenSock (@GreenSock) on CodePen If you want to repeat the animation infinitely after all pieces have animated, you could add a 'repeat: -1' to the tween. 5 Link to comment Share on other sites More sharing options...
akapowl Posted September 25, 2020 Share Posted September 25, 2020 @ZachSaucier Since I see you in here atm, the tween in the example has the duration applied twice (once per old and once per new syntax) - might be leading to misunderstandings. Link to comment Share on other sites More sharing options...
Nine Posted September 25, 2020 Author Share Posted September 25, 2020 @akapowl Thank you for the staggering tipp, what I wanna ask also is I want each element to do the animation end it, continue to the next element do the same and so on, and when it reaches the last element, repeat the sequence, something similar like the preload on the site I posted, sorry if I am asking too many newb questions 😅 I really wanna understand this library better Link to comment Share on other sites More sharing options...
akapowl Posted September 25, 2020 Share Posted September 25, 2020 @Nine Something like this? See the Pen cad6c8e19c9216253e5b46fc04db2c4c by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
Nine Posted September 25, 2020 Author Share Posted September 25, 2020 @akapowl more like if the first box went down then went back, then the second did the same and then the rest follows and when each one is done, the first one starts again, it is kinda like a sequence in a sequence, maybe I am wording it complicated Link to comment Share on other sites More sharing options...
akapowl Posted September 25, 2020 Share Posted September 25, 2020 You're thinking of it just right, when saying it's a sequence within a sequence. I think for that, you'd have to work with the concept of sub-timelines. For each element create a timeline of its own and add that timeline with a specific delay/offset for each box to a larger timeline, that you can repeat inifinitely. See the Pen f09907069611773937586a959f225fad by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
Nine Posted September 25, 2020 Author Share Posted September 25, 2020 Wow, thanks for that @akapowl as I am still not familiar with all the features I sometimes don't have everything on my disposal, I am really grateful for the helpful input you just gave me 🙏 1 Link to comment Share on other sites More sharing options...
PointC Posted September 25, 2020 Share Posted September 25, 2020 Another option would be to set the amount in the stagger object based on the array length. Something like this. See the Pen c912fe99013c47555e2b9a3b8c3a031e by PointC (@PointC) on CodePen Happy tweening. 4 1 Link to comment Share on other sites More sharing options...
Nine Posted September 25, 2020 Author Share Posted September 25, 2020 thanks @PointC for the input, I will play arround the concept of nested timelines these days, thank you again @akapowl such an amazing community on GSAP forum 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 25, 2020 Share Posted September 25, 2020 1 hour ago, akapowl said: the tween in the example has the duration applied twice (once per old and once per new syntax) - might be leading to misunderstandings. Fixed, thanks. 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