Question about staggering multiple animations

[isseto]

Hello there!

 

I had a quick question about the stagger effect. I have a timeline of animations ("tlgrass") applied on a same class (".grass"), and I am looking to delay each .grass element by a few seconds in a staggered effect. So each .grass element would go off delayed by x seconds each, but they have the same animation effects applied.

 

I am not sure how to go about doing this. Is it possible to nest a timeline under a TweenMax.staggerTo function? Or maybe by passing a function?

 

var grass = document.getElementsByClassName("grass");


var tlgrass = new TimelineMax({

	repeat: -1,

});

// This is the animation I would like all the grass objects to do

tlgrass.to(grass, .8, {

	transformOrigin:"0% 100%",

	skewX:"10deg"})

	.to(grass, .5, {skewX:"0deg", ease: "linear"})

	.to(grass, .8, {skewX:"-12deg"})

	.to(grass, 1.5, {skewX:"0deg",})

Thanks in advance!

See the Pen ALbEkL by issey (@issey) on CodePen

[Jonathan]

Hello isseto, and Welcome to the GreenSock forum!

Thank you for the example, very helpful .. you forgot to add Tweenmax.min.js via the JS panel gear icon script modal.

 

First off here is nice video tut on how to use stagger tweens

 

 

And how to use stagger tweens with the cycle property (GSAP version 1.18.0 required)

 

 

Basically what you have now has multiple duration's. If you wanted to keep that timing of the duration and timing, then what you already have is fine. I would recommend that you probably increase the skewX ending value, so it is more pronounced when animating. Right now the movement is very faint.

 

If you wanted to just have one duration then you can use a staggerFromTo() . so you can control the start and end values for your stagger.

.staggerFromTo(
   targets:Array, 
   duration:Number, 
   fromVars:Object, 
   toVars:Object, 
   stagger:Number, 
   position:*, 
   onCompleteAll:Function, 
   onCompleteAllParams:Array, 
   onCompleteScope:* 
)

So possibly like this using staggerFromTo:

tlgrass.staggerFromTo(grass, 0.8, {
  transformOrigin:"0% 100%",
  skewX:"0deg"
}, {
  skewX:"-12deg"
}, 0.3);

or with just a staggerTo()

// OR like this using TimelineMax.set() for your initial values so its applied in the timeline
tlgrass.set(grass, {
  transformOrigin:"0% 100%",
  skewX:"0deg"
})
tlgrass.staggerTo(grass, 0.8, {
  skewX:"-12deg"
}, 0.3);

// OR like this using TweenMax.set() for your initial values so it gets applied before your timeline starts
TweenMax.set(grass, {
  transformOrigin:"0% 100%",
  skewX:"0deg"
});

tlgrass.staggerTo(grass, 0.8, {
  skewX:"-12deg"
}, 0.3);

GSAP set() method in this instance applies your starting initial values. Otherwise you would have to add those initial values in your CSS stylesheet.

 

Resource:

staggerFromTo() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerFromTo/

staggerTo() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerTo/

TweenMax.set() : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

TimelineMax.set() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/set/

 

Let us know if you have any questions!

[isseto]

Hi Jonathan ( <-- I don't know how to tag your name in the forum!)

Thank you so much for your thorough reply!! :D

 

I took the time to watch the videos and read through everything -- thank you, it has helped clear up a lot of confusion. The 3 examples were quite helpful.

Thank you for cleaning up my code too!

 

However, I think I still have the same original problem. I changed the Codepen to the .staggerFromTo example you had suggested, and increased the values so as to see the animation better.
This is what I have now:
 

var tlgrass = new TimelineMax({
  repeat: -1,
  yoyo: true
});

tlgrass.staggerFromTo(grass, 2.5, {
  transformOrigin:"0% 100%",
  skewX:"25deg"
}, {
  skewX:"-25deg"
}, 0.3);

The stagger effect works indeed, each animation is delayed by 0.3 seconds. However, my problem is that they stop and wait for each grass object to loop through, before repeating (or yoyo-ing in this case) back. 

What I am looking for is for the grass elements to swing left and right continuously without stopping (skewX to the right, skewX to the left, skewX to the right, etc...). And right now each grass element skews to the right, then stops and waits for all the others to skew the same, before going back to the left.

Is there a way to have them continuously loop without pausing?

Thanks again!!!

Link to Codepen.

[Jonathan]

Hello again.. Try this:

 

See the Pen LRZjBR by jonathan (@jonathan) on CodePen

 

Instead of having repeat:-1 and yoyo:true on the TimelineMax() constructor. You can just add that to your staggerFromTo() tween like this:

var tlgrass = new TimelineMax();

tlgrass.staggerFromTo(grass, 2.5, {
  transformOrigin:"0% 100%",
  skewX:"25deg"
}, {
  skewX:"-25deg",
  repeat: -1,
  yoyo: true
}, 0.3);

See if that helps

[isseto]

Hey again Jonathan!

Wow can't believe I hadn't thought of that! It makes so much sense.

Thanks so much!  

Here is the final

See the Pen EyByGB by issey (@issey) on CodePen

if you're curious

I used the staggered yoyo on the grass, clouds and trees.

You're awesome.

[Jonathan]

That pretty awesome isseto, Thanks for sharing and glad to help!

 

Happy Tweening