Jump to content

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

how to apply repeat to "staggerTo"

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

<script type="text/javascript">
var t1 = new TimelineLite();
t1.staggerTo(".box", 0.1, {rotation:360, y:750}, 0.11);




I want to make non-stop motion so i added like this:

t1.staggerTo(".box", 0.1, {rotation:360, y:750}, 0.11 ,repeat:-1);


and it won't run. how can i solved this?


Link to comment
Share on other sites

Hi @JMgreen, welcome to GreenSock :)


You are very close ... `repeat` can be set just like `y` and `rotation` inside the vars object of the tween, in the vars object of the timeline (which will produce a different result), or with the repeat method on the timeline (which will produce the same result as the vars object of the timeline). Here are demonstrations of those options.


*Note TimelineLite doesn't accept the repeat parameter ... so I used TimelineMax for that. Stagger does accept the repeat parameter, so we could place it directly on the tween within a TimelineLite. :)


See the Pen Zopyrz by sgorneau (@sgorneau) on CodePen


Happy Tweening!


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