Newbie Question about Cycle Property

[Presuming Ed]

Hey

 

I'm getting to grips with using GSAP in Animate cc, and I've come across the  cycle property and am trying to cycle through an array, as follows:

 

var items = [this.item1,this.item2,this.item3]
var tl = new TimelineMax();

tl.staggerFrom(items, 2, {autoAlpha: 1,scaleX: 0,scaleY: 0, ease:Bounce.easeOut, cycle:[-100,100]}, delay:2}, 0.1)

 

but it seems to ignore the cycle request. I've noticed people use list items within HTML, so is this the reason it won't work?

 

(Sorry no codepen)

 

Thanks!

[PointC]

I'm not sure which property you want to cycle, but you just have a little syntax problem. If you wanted to cycle the x position, you'd write it like this:

 

tl.staggerFrom(items, 2, {autoAlpha: 0,scaleX: 0,scaleY: 0, ease:Bounce.easeOut,  cycle:{x:[-100,100]} }, 0.1);

 

Hopefully that helps. Happy tweening.

 

[Presuming Ed]

Thanks man thats works fine. I think i'm getting confused with this property though. What I'm trying to do is cycle so that some items fly in from the left and some from the right, alternately. Am I setting this up correctly?

 

Thanks in advance!

[PointC]

Staggering left and right sounds like you'd want to cycle the x position. Here's a quick example.

 

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

Hopefully that helps. Happy tweening.

 

[Presuming Ed]

2 hours ago, PointC said:

Staggering left and right sounds like you'd want to cycle the x position. Here's a quick example.

 

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

Hopefully that helps. Happy tweening.

 

 

Got it! Thanks for your help. At first it was doing the same as before and then i realised it was all to do with the x values not being correct! Doh! I always tend to look for more complicated solutions and forget the obvious!!

Thanks again for your time