Jump to content


repeat animation across screen

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a timeline animation:


var animation = new TimelineMax({repeat:2});
animation.to(hanging, 2, {y:"+200px", ease:Bounce.easeOut})
animation.to(mischief, 2, {x: "-=230"})
animation.to(mischief, 3, {x: "900"})
animation.to(rachel, 1, {y: "0"})
animation.to(rachel, 3, {y: "-=120px"})
animation.to(rachel, 5, {y: "+=70px"})
animation.to(rachel, 6, {x: "+=50"})
animation.to(rachel, 6, {y: "-=90px"})
animation.to(rachel, 6, {y: "+=180px"})
animation.to(rachel, 6, {x: "-=430", y: "0px"})


I need to create an animation that goes up and down, bouncing, but require the bounce to continue as it goes across the screen.


Any help greatly appreciated



  • Like 1
Link to comment
Share on other sites

Hi gcooke  :)


Welcome to the forums.


I'm not sure I completely follow your question. It sounds like you're trying to do a bouncing ball type of effect, but your code above is showing three different elements and a duration of 40 seconds so I'm not quite sure.


If it is a bouncing ball effect you're looking for, here's an excellent post:



Here's a great bouncing CodePen by GreenSock:

See the Pen 4db89a13f37bcb953f38c3ba00b60706 by GreenSock (@GreenSock) on CodePen


The easiest way to get the best answers would be to provide a CodePen so we can see your code in action. Here's how to do that:



Hopefully that gets you started, but as I mentioned, a demo would be great. 


Happy tweening.


  • Like 4
Link to comment
Share on other sites

Let's stay away from the ball and just look at repeat animation across a screen. To achieve a repeating animation across a screen currently i need to use the following code over 60 times.


example in code pen,

See the Pen BjbZYg by anon (@anon) on CodePen


There must be a way to achieve this with only a few lines of code?



Link to comment
Share on other sites

o.k. - I see what you need now. :)


You can just use a loop. Please change your pen to this:

var tl = new TimelineLite();

for(var i = 0; i < 60; i++) {
tl.to(".box", .1, {y: "-=7",x: "+=5px"})
tl.to(".box", .1, {y: "+=7",x: "+=5px"})

See the Pen QyoMYO by PointC (@PointC) on CodePen


Hopefully that helps a bit.


Happy tweening. 


  • Like 3
Link to comment
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.