Jump to content
Search Community

Wave animation: Launch next tween of TimelineMax before the repeatDelay finish

SoldierCorp test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello!

 

I am trying to build like a wave animation but using multiple elements, in the pen I left, there are 6 levels with some circles in each level.

 

The current animation behavior is... each level of elements starts right after the previous one finish but the behavior I want to achieve it's like a fluid wave, so when the first level it's like at 50% of it's animation, the next level should starts and the same for the next levels, so a complete wave will be visible in the timeline and of course when the last level finish, the wave will start again.

 

Can you help me with that please?

See the Pen xWJdXv by SoldierCorp (@SoldierCorp) on CodePen

Link to comment
Share on other sites

Hi @SoldierCorp :)

 

Welcome to the forum.

 

You can also turn that into a loop to tidy things a bit.

 

See the Pen yKqzBp by PointC (@PointC) on CodePen

Doing that would also give you the option of creating a separate timeline for each group and the first one could restart before the last one ends to create even more of a 'wave' feel. Just my two cents worth. Happy tweening and welcome aboard.

 

:)

 

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