Search the Community

Showing results for tags 'tl'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 1 result

  1. 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