Jump to content
GreenSock

idarfan

TweenMax.staggerTo and staggerForm issue

Moderator Tag
Go to solution Solved by Ihatetomatoes,

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

The first roll of the box effect is falling down, and the second roll of box effect is floating up. It looks like only second roll of texts has been done. How can I fix this problem?

 

and how do I mark the box begin postion

See the Pen VvvezK by idarfan (@idarfan) on CodePen

Link to comment
Share on other sites

You have two tweens happening simultaneously.  You either need to use a timeline to start the second tween after the first one finishes...  or use a delay of greater than 2 on your second tween.

Link to comment
Share on other sites

Hi idarfan  :)

 

pls try like this , you can change repeatDelay to make your desired effect  :

TweenMax.staggerTo(".box",2,{rotation:360,y:300,yoyo:true,repeat:1,repeatDelay:2},0.5);

See the Pen Gppqaq by MAW (@MAW) on CodePen

Link to comment
Share on other sites

  • Solution

Hi idarfan,

I've created a CodePen showing you a few options - 

See the Pen 1462ef622d1488e3c956bbdddb6f39fb by ihatetomatoes (@ihatetomatoes) on CodePen

 

As MindGamer mentioned, your TweenMax staggerTo and staggerFrom tweens are running at the same time, giving you the wrong result.

 

The best way would be to use a timeline:

// Timeline controlling boxes up/down
var tl = new TimelineMax();
tl.staggerTo(".box", 2, {rotation:360, y:300}, 0.5)
  .staggerTo(".box", 2, {rotation:0, y:0}, 0.5);

By default the starting position of the elements is the position defined in the stylesheet. In other words if you would want to swap the order of your animations, you could use something like this:

// Timeline controlling boxes down/up
var tl = new TimelineMax();
tl.staggerFrom(".box", 2, {rotation:360, y:300}, 0.5)
  .staggerTo(".box", 2, {rotation:360, y:300}, 0.5);

Explore the code in the CodePen, I've commented out some of the code snippets.

 

Cheers

Petr

Link to comment
Share on other sites

hello Diaco thank you. its worked. 

Hi idarfan  :)

 

pls try like this , you can change repeatDelay to make your desired effect  :

TweenMax.staggerTo(".box",2,{rotation:360,y:300,yoyo:true,repeat:1,repeatDelay:2},0.5);

See the Pen Gppqaq by MAW (@MAW) on CodePen

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