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