Jump to content
Search Community

Use stagger effect after two animations complete

Sygol test
Moderator Tag

Recommended Posts

Hi guys,

 

I am having a bit of issues with stagger and chained animations within a timeline. I am trying to create a stagger animation on the parent div, which would then include two different tweens (p.first and p.second) within the timeline. Once the animation for the first div is complete, then the next parent div would fire, followed by the third, etc. So basically, GSAP to run:

1) stagger starts; first div anim; 2) p.first anim; 3) p.second anim; 4) end first div anim; 5) begin second div anim; 6) etc. 

GSAP’s default behaviour is to run 1) stagger anim. on all divs, 2) p.first anim; 3) p.second anim

Is the desired behaviour possible?

 

Thanks!

See the Pen eYJRLbV by kuba-sygowski (@kuba-sygowski) on CodePen

Link to comment
Share on other sites

Thanks guys,

@Nekiy2 I didn't think of doing it this way, this is nice solution, the only problem is that we kind of get out of our timeline then.

I guess, there is no other way than stick with Zach solution, and then if I want to randomise it I would need to shuffle elements inside items array with JavaScript first

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...