meesrttn

Repeating code for more elements with a delay

Recommended Posts

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 :)

 

Share this post


Link to post
Share on other sites

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: https://codepen.io/dipscom/pen/NbPxQJ?editors=0010

 

Custom Bounce starter pen for you to play with and read more detailed info: http://codepen.io/GreenSock/pen/pEEVoV

 

Would that be what you are after?

  • Like 2

Share this post


Link to post
Share on other sites

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: https://codepen.io/dipscom/pen/NbPxQJ?editors=0010

 

Custom Bounce starter pen for you to play with and read more detailed info: http://codepen.io/GreenSock/pen/pEEVoV

 

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.

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

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? ;)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.