Jump to content
Search Community

Two StaggerFrom simultaneously

Roms test
Moderator Tag

Go to solution Solved by PointC,

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

Hi ,Excuse me ,I don't speak English very well , I am French student ah ah  :D

I have two layer Sketch1 and Sketch2 .How run multiple staggerFrom same time ? , with the Sketch1 and Sketch 2.

My two sketch (1 and 2)  are composed of several square Group

The Sketch2 starts when the Sketch1 ends.

 

Thank you everyone !  :-)

post-42484-0-13415700-1457192740_thumb.jpg

post-42484-0-04780400-1457192741_thumb.jpg

post-42484-0-46566900-1457192976_thumb.jpg

post-42484-0-15575000-1457192977_thumb.jpg

post-42484-0-29298200-1457193787_thumb.jpg

post-42484-0-03799300-1457193788_thumb.jpg

Link to comment
Share on other sites

  • Solution

Hi Roms :)

 

Welcome to the forums. 

 

You would have a couple choices for that. In your case, the staggers are the same for both tweens so you can add a second target to the tween. If the staggers were different you would use the position parameter to start both tweens at the same time. I've included both options:

// since both staggers are the same, you can just add a second target to the tween like this
tl.staggerFrom("#SKETCH1 g, #SKETCH2 g", 50,{opacity:0, ease:RoughEase.ease.config({ template:SteppedEase.config(20), strength:200, points:200, taper:"out", randomize:true, clamp:true})},0.1)

// if the staggers were different you would use the position parameter to start both at time 0
tl.staggerFrom("#SKETCH1 g", 50,{opacity:0, ease:RoughEase.ease.config({ template:SteppedEase.config(20), strength:200, points:200, taper:"out", randomize:true, clamp:true})},0.1)
tl.staggerFrom("#SKETCH2 g", 50,{opacity:0, ease:RoughEase.ease.config({ template:SteppedEase.config(20), strength:200, points:200, taper:"out", randomize:true, clamp:true})},0.1,0) // the 0 is the position parameter

You can learn more about the position parameter here:

http://greensock.com/position-parameter

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

:)

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