Jump to content
GreenSock

gcooke

repeat animation across screen

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

Hi,
 
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

 

Greig

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

http://greensock.com/forums/topic/12741-how-to-animate-a-bouncing-ball-effect/

 

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:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

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?

 

Thanks

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