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

# simple staggerTo and cycle in timeline

## Recommended Posts

Hi,

I'm trying to stagger in a series of boxes with opacity. Maybe the cycle feature is an overkill for this but I'd like to learn how to use it. All of the tutorials I've found on the cycle feature seem a bit complicated. Is there an example of a simple staggerTo with cycle in a regular timeline anywhere?

```var tl = new TimelineMax();
tl.to(".circle", .5, {opacity:-1})
.staggerTo(".boxes", 1, {
cycle:{
opacity:[-1, 1]
ease: [Power4.easeInOut]
}
}, 0.05)

.to .....```

-thanks

##### Share on other sites

Hi kvnmcwebn,

this example is in the DOCs of staggerTo:

See the Pen wMMgoe by GreenSock (@GreenSock) on CodePen

"Instead of defining a single value (like `x:100, rotation:90`), you can define an Array of values to cycle through (like `cycle:{x:[100,-100], rotation:[30,60,90]}`) or even use function-based values (like `cycle:{x:function() { return Math.random() * 200; }}`). The amount of functionality you can pack into a single line of code is staggering (pun intended)."

Do you miss a concrete point? Do you have a certain question?

Kind regards

Mikel

• 4
##### Share on other sites

Cycle may seem confusing at first, but once it 'clicks' for you, you'll see that it's pretty simple to use. In your case you mention staggering the opacity of some elements. If you want them all to stagger in to an opacity of 1, a regular stagger is what you'd want to use. (Just an FYI - I see you have an opacity of -1 in your cycle values. That won't break anything, but opacity only goes from 0 to 1. )

Cycle comes in handy when you don't want the array of elements to do the same thing or end at the same value. Here's a basic example like you mentioned with a series of boxes animating in. You'll see I have 5 values in the opacity cycle array. The first box animates to an opacity of 0.2, the second to 0.4 and so on.

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

Does that make sense?

Hopefully that helps.

Happy tweening.

• 3
##### Share on other sites

Hi Mikel,

Lol, yes that's a staggering demo. This feature is going to save me a lot of time. I have a couple questions, first I don't understand how you're getting the object's color values to cycle when you have the initial value set in the css with fill or backgroud-color attributes.  Second is a function required to loop the cycle?I wasn't able to use repeat or yoyo anywhere in or around the cycle property.I have to learn how to use simple functions in GSAP can you recommend any tutorials?

See the Pen rwREwe by kvnmcwebn (@kvnmcwebn) on CodePen

Thanks very much.
-Kevin

##### Share on other sites

1 hour ago, PointC said:

Hi Point C,

I was replying at the same time you were. Thanks for the further explanation, I'm starting to get it now. I wasn't aware we can set multiple properties on one value like that.  That's actually going to be super helpful for my project.

Thanks!

• 2
##### Share on other sites

Is something like this loop possible with cycle without using functions:

See the Pen XgQrVw by kvnmcwebn (@kvnmcwebn) on CodePen

##### Share on other sites

I'm confused. Should that stagger be doing something differently? It seems like it's working fine without cycle. Is there a different desired behavior?

Thanks.

##### Share on other sites

Pardon yes, I'd like to put in multiple attributes for one value like you had in your example:

``````  opacity:[0.2, 0.4, 0.6, 0.8, 1]
}``````
##### Share on other sites

o.k. - I'm still not sure of the desired outcome here, but you can put those values in for opacity like this:

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

Does that help?

Happy tweening.

• 2
##### Share on other sites

Point c thanks a million that's what I was trying to do. I just didn't know the correct syntax.

##### Share on other sites

Ah but it looks like the timeline thinks that both of these tween methods have an infinite duration... none of the tweens that come after them play... hmm

##### Share on other sites

Yep - infinite tweens won't let the next one play. There are a few workaround options for you though. This thread has information that should guide you to a solution.

Hopefully that helps. Happy tweening.

• 2
##### Share on other sites

great thanks I'll give it a read

##### Share on other sites

Hi Point C,

I'm having trouble with getting a function to fire off  with the onComplete as per your example:

See the Pen XgQrVw by kvnmcwebn (@kvnmcwebn) on CodePen

##### Share on other sites

or with the cycle:

See the Pen rwREwe by kvnmcwebn (@kvnmcwebn) on CodePen

##### Share on other sites

Hi kvnmcwebn,

As PointC mentioned: "infinite tweens won't let the next one play".

As an alternative try it with a certain position parameter of a tween.

Or this example - tween 02 starts 2 sec after beginning of the timeline:

See the Pen XgQMpe by mikeK (@mikeK) on CodePen

Happy tweening ...

Mikel

• 2
##### Share on other sites

Yep - @mikel's demo shows how you can get around the infinite tween problem with the position parameter. The thread I listed above also has some other options available.

Let us know if you need additional assistance.

Happy tweening.

• 1
##### Share on other sites

No I see what I did. I didn't wrap the stagger in the function as in your example. Between that and mikels example I should be all good. Thanks guys

• 1