simple staggerTo and cycle in timeline

[kvnmcwebn]

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

[mikel]

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

 

 

[PointC]

Hi @kvnmcwebn

 

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.

[kvnmcwebn]

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

[kvnmcwebn]

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!

[kvnmcwebn]

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

 

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

 

[PointC]

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.

[kvnmcwebn]

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]
     }

[PointC]

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.

[kvnmcwebn]

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

[kvnmcwebn]

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

[PointC]

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.

[kvnmcwebn]

great thanks I'll give it a read

[kvnmcwebn]

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.

 

[kvnmcwebn]

or with the cycle:

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

 

[mikel]

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.

See https://greensock.com/position-parameter

 

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

[PointC]

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.

[kvnmcwebn]

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