Jump to content


Duration the same as the sum of an arbitrary number of other durations

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

In my bounce codepen, I am using a `Timeline` to tween `y`. These durations are all different as the bounce distance changes, as the ball loses momentum.


I am also tweening `x`, which is a single duration so that the ball travels.


I want the `x` duration to be the same as the sum of all the `y` durations. Currently, if I add another bounce to my `y` sequence, it will throw off the `x` duration.


Is there a nice way to do this so that my `x` duration just works without me having to manually tightly couple it to the sum of the `y` durations?

See the Pen LyKNqm by alanbuchanan (@alanbuchanan) on CodePen

Link to comment
Share on other sites

Hi @alan0buchanan:)


One option would be to move the x position tween off the timeline into its own tween and set its duration to the duration of the bounce timeline.


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

 If it were me though, I'd be looking at using CustomBounce for this. It would be easier and you'd be able to add some squash and stretch.




Hopefully that helps. Happy tweening.


  • Like 3
Link to comment
Share on other sites

Yeah, if you haven't checked out CustomBounce, I think it'll save you a LOT of time and hassle with an effect like this. 



If you don't want to get a Club GreenSock membership, you could still build your own CustomEase and draw the bounce yourself. It'd still probably be easier than stringing together all those tweens (which is fine, of course - nothing "wrong" with it). 

  • Like 2
Link to comment
Share on other sites

Thanks @PointC and @GreenSock, I didn't realise I could access the duration of a Timeline like that. Looks like WiggleBounce is ideal for what I was looking to do.

  • Like 2
Link to comment
Share on other sites

No problem, @alan0buchanan - push through the learning curve and I think you're gonna really like the tools and see how intuitive they become as you grow familiar with the API. Happy tweening!

Link to comment
Share on other sites

CustomBounce is definitely the way to go. If you are starting your bounce from the bottom like a jump, be sure to check out endAtStart:true:

See the Pen vyBBOP?editors=0010 by GreenSock (@GreenSock) on CodePen




Just to add to Craig's great advice of using the duration of the timeline for the duration of the x tween... you can still put the x tween in the timeline by adding it last with a position of 0 like:


.to(blob, .3, {y: -800, ease: goingUp})
.to(blob, .3, {y: 0, ease: goingDown})
.to(blob, .2, {y: -300, ease: goingUp})
.to(blob, .2, {y: 0, ease: goingDown})
.to(blob, .15, {y: -100, ease: goingUp})
.to(blob, .15, {y: 0, ease: goingDown})
.to(blob, .1, {y: -70, ease: goingUp})
.to(blob, .1, {y: 0, ease: goingDown})
.to(blob, bounce.duration(), {x: 500}, 0); //add at a time of 0


  • Like 5
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.