Repeating code for more elements with a delay

[meesrttn]

Hi, 

I have a question about looping and delaying some elements.

In the codepen link I provided will be an example of what I want to achieve.

The problem is that I don't know how to loop the code...

If I paste the code 16 times it will work for all of the rectangles.

Is it possible to make a loop with TweenLite? 

 

This is a part of my code: 

 

var rect = document.querySelectorAll('.rectangle');


i = 15;


var tl = new TimelineLite();
tl
  .from(rect[i--], 0.3, {
    y: '-1000',
    scaleY:5,
    ease:Power1.easeIn
  }, "fall")
  .to(rect[i+1], 0.15, {
    transformOrigin: "bottom 50%",
    scaleY: 0.75,
    scaleX:1.5,
    ease:Power1.easeOut
  }, "squash")
  .to(rect[i+1], 0.2, {
    y: '-200',
    scaleY:1.3,
    scaleX:0.8,
    ease:Power1.easeOut
  }, "bounce")
  .to(rect[i+1], 0.15, {
    y: '0',
    scaleY:1,
    scaleX:1,
    ease:Power1.easeIn
  })
  .to(rect[i+1], 0.2, {
    y: '0',
    scaleY:.8,
    scaleX:1.35,
    ease:Power1.easeOut
  }, "bounce-fall")
  .to(rect[i+1], 0.2, {
    y: '-100',
    scaleY:1.2,
    scaleX:0.8,
    ease:Power1.easeOut
  }, "second-bounce")
  .to(rect[i+1], 0.15, {
    y: '0',
    scaleY:1,
    scaleX:1,
    ease:Power1.easeOut
  }, "final-position")

I want to loop this animation for every rectangle (there are 16)

with a delay of 0.5 seconds between each rectangle falling.

How can i achieve this?

 

Thanks in advance

 

See the Pen BQyjLJ by meesrutten (@meesrutten) on CodePen

[Dipscom]

Do you HAVE to use TweenLite?

 

If you can, use TweenMax. It will make a world of difference, together with CustomEase and CustomBounce, your work is cut by 90%.

 

A fork of your pen: 

See the Pen NbPxQJ?editors=0010 by dipscom (@dipscom) on CodePen

 

Custom Bounce starter pen for you to play with and read more detailed info: 

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

 

Would that be what you are after?

[meesrttn]

Do you HAVE to use TweenLite?

 

If you can, use TweenMax. It will make a world of difference, together with CustomEase and CustomBounce, your work is cut by 90%.

 

A fork of your pen: 

See the Pen NbPxQJ?editors=0010 by dipscom (@dipscom) on CodePen

 

Custom Bounce starter pen for you to play with and read more detailed info: 

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

 

Would that be what you are after?

 

That's almost exactly what i'm after thank you so much.

I will look into TweenMax some more.

[Dipscom]

Oh and, by the way, welcome to the Forums!

 

As some of the others say here: "Happy Tweening!"

[meesrttn]

Oh and, by the way, welcome to the Forums!

 

As some of the others say here: "Happy Tweening!"

 

I currently don't have the money to invest in plugins for TweenMax..

Do you know a way how I can substitute CustomBounce and CustomEase?

I feel like I wasn't that far off with my original code. 

Could you give me a push in the right direction?

[Dipscom]

Hey meesrttn,

 

The customEase and customBounce will be available for anybody who's got an account - Like the one you have - In other words, they are going to be free when officially released. You can play around with it using those links for now until the official release is made.

 

But, there are ways of faking the same thing if you can't wait a bit.