staggerTo

[Matija Milikic]

Hi I use TweenMax,but acctually the only thing I need is "staggerTo".Is there somebody who knows how I can make that effect without TweenMax.It's stupid to use whole library which has so many features and I need only one. 

[OSUblake]

Stagger is just a helper method that runs a loop, so something like this...

var boxes = document.querySelectorAll(".box");

for (var i = 0; i < boxes.length; i++) {
  TweenLite.to(boxes[i], 1, { x: 400, delay: i * 0.15 });
}

See the Pen d2efac34e16df63c13cc0b89191cc8cd?editors=0010 by osublake (@osublake) on CodePen

[Matija Milikic]

Stagger is just a helper method that runs a loop, so something like this...

var boxes = document.querySelectorAll(".box");

for (var i = 0; i < boxes.length; i++) {
  TweenLite.to(boxes[i], 1, { x: 400, delay: i * 0.15 });
}

See the Pen d2efac34e16df63c13cc0b89191cc8cd?editors=0010 by osublake (@osublake) on CodePen

But what if I want to start from last element?

In TweenMax I just add a "-" in front of delay time.

TweenMax.staggerTo(".box", 0.42, {x:x_pos,ease: Power2.easeInOut},-0.0102);

And I also need TweenLite for that,I was asking about stagger without any library.

[OSUblake]

Same thing for reverse...

var boxes = document.querySelectorAll(".box");

var len = boxes.length;
for (var i = 0; i < len; i++) {
  TweenLite.to(boxes[i], 1, { x: 400, delay: (len - i) * 0.15 });
}

If you don't want to use GSAP, then how do you plan on animating your objects? Just use a CDN, and GSAP will be cached on the users browser. 

[Matija Milikic]

Same thing for reverse...

var boxes = document.querySelectorAll(".box");

var len = boxes.length;
for (var i = 0; i < len; i++) {
  TweenLite.to(boxes[i], 1, { x: 400, delay: (len - i) * 0.15 });
}

If you don't want to use GSAP, then how do you plan on animating your objects? Just use a CDN, and GSAP will be cached on the users browser. 

I need stagger for only one animation so I think that is better not to use any library.I would like to know how to make stagger animation without any library.Cause it's just one animation I can set the transition in css  and instead of "x=400" I can use "style.transform="translateX(some value)"

[Matija Milikic]

Same thing for reverse...

var boxes = document.querySelectorAll(".box");

var len = boxes.length;
for (var i = 0; i < len; i++) {
  TweenLite.to(boxes[i], 1, { x: 400, delay: (len - i) * 0.15 });
}

If you don't want to use GSAP, then how do you plan on animating your objects? Just use a CDN, and GSAP will be cached on the users browser. 

I need stagger for only one animation so I think that is better not to use any library.I would like to know how to make stagger animation without any library.Cause it's just one animation I can set the transition in css  and instead of "x=400" I can use "style.transform="translateX(some value)"

[Carl]

If you are adamantly opposed to using our tools, I'm a bit confused why you are asking for our help. 

It's kind of like asking Adobe how to edit images without PhotoShop. 

As Blake has shown, we will gladly help you with the GSAP API... Its what we do. 

For help with other technologies I strongly recommend stackoverflow.com

[Matija Milikic]

If you are adamantly opposed to using our tools, I'm a bit confused why you are asking for our help. 

It's kind of like asking Adobe how to edit images without PhotoShop. 

As Blake has shown, we will gladly help you with the GSAP API... Its what we do. 

For help with other technologies I strongly recommend stackoverflow.com

No,I really really like TweenMax and use it in almost any website I make.But for this project I need staggerTo only once and nothing else from TweenMax.I would like to know just for this time is there a way to make function staggerTo which will work exactly like staggerTo with whole library ,I'm just trying to use that feature without whole library,cause lets say from 50 features I only need 1.Of course I'll use TweenMax for every website that needs to have animations. 

[Matija Milikic]

No,I really really like TweenMax and use it in almost any website I make.But for this project I need staggerTo only once and nothing else from TweenMax.I would like to know just for this time is there a way to make function staggerTo which will work exactly like staggerTo with whole library ,I'm just trying to use that feature without whole library,cause lets say from 50 features I only need 1.Of course I'll use TweenMax for every website that needs to have animations.Please understand me.I can make stagger effect without TweenMax but it look's so bad(probably beacause transition of element is bad)

[GreenSock]

I totally understand the desire to avoid "overkill" by using the bare minimum tools/JS for the job. I'm not opposed to that at all, but I would just encourage you to consider the tradeoffs the other way too. For example, you may only need one staggered animation today on that site and you could cobble together a vanilla JS solution that taps into requestAnimationFrame, manually updating transforms, etc. but then what happens when the client wants to sprinkle some other animation in later? Will you rewrite that old effect in GSAP at that point? Will it feel like a waste of your time? If you write some animations in vanilla JS and some in GSAP, what if you eventually need more control of the vanilla ones (like maybe a modal window pops up and you need to pause all the animations or slow them to 0.1 of their speed?) If it's all GSAP, that's super easy. If you've got various technologies (maybe even some CSS transitions mixed in), it could get very, very awkward. 

 

So I guess ultimately you need to decide what the higher "cost" is and what matters most in your project. The entire TweenMax library is smaller that a single image on many sites, and it's pervasively cached as well, thus you only "pay" the price once and then it's free on every other page. In most cases, the load time is less than 1 second (and then 0 seconds every page thereafter).

 

Again, I understand the desire to keep things minimal and I don't blame you at all. It may be entirely appropriate. I just wanted to offer some other food for thought. 

 

Happy tweening!