Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Nine

GSAP Looped Animations

Recommended Posts

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 :D 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 post
Share on other sites

 

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.

 

  • Like 5
Link to post
Share on other sites

@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 post
Share on other sites

@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 post
Share on other sites

@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 post
Share on other sites

 

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 ZEWPQXW by akapowl (@akapowl) on CodePen

  • Like 4
Link to post
Share on other sites

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 🙏

  • Like 1
Link to post
Share on other sites

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 :D 

  • Like 3
Link to post
Share on other sites
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.

  • Like 1
Link to post
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.

×