Jump to content
Search Community


mimeartist test
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 about 10 beziers routes that all have the same start and finish points, and the control point is a random position for each one... how do I get it to reach each control point at the same time, because at the moment it draws each curve beautifully and they finish all in sync... but this obviously means they hit their control point at a different time?





Link to comment
Share on other sites

Hi Carl,


Here is my codePen, as you can see when you run them one reaches it's mid point more quickly than the other...


See the Pen rmeNKw by mimeArtist (@mimeArtist) on CodePen


Alternatively I'll just tween to the mid point, and then perform a tween to the end point... but to get some kind of curve / gravity, I'd need to have a different ease for both axis? Not sure how to do that?



Link to comment
Share on other sites

Thanks for the demo.


I think its going to be very challenging to get realistic motion with limits you proposed: all tweens having same duration and reaching midpoint at exact same time.

Your red box has its midpoint very close to the beginning (20%)and the blue box has its midpoint very close to the end (80%)


If it takes 2 seconds for the blue box to travel 80% of the distance and then 2 seconds to travel the last 20% its going to look like someone slammed on the brakes or perhaps the amount of gravity decreased drastically. Likewise the red box will reach its midpoint very slowly and then have to accelerate to catch up to the blue box (so they end at the same time). 



Unfortunately there are no hooks in the API to perform all the calculations you'll need to do this properly and its not something I can figure out.


One approach would be to figure out what time() or progress() your bezierTweens are at when the objects reach the midpoint. Then create a tween that tweens that tween to that progress() or time() and another tween that tweens the tween to the end. A demo showing how to tween the progress() of a tween is here: http://codepen.io/GreenSock/pen/YwOWmQ

  • Like 2
Link to comment
Share on other sites

Thanks Carl,


I set those at slight extremes to show the issue... 


I've decided to do a workaround, whereby I do a tween to the midpoint and then a new one for the second part from the control point to the end point... to get a curve I've assumed a control point for each half and it seems to pretty much work... I want the midpoints when all reach to move very slowly... so I'm doing an power ease out and then easein...


Thanks for your help!


  • Like 1
Link to comment
Share on other sites

Thanks Manfred,


That looks very good... the issue I have is that it's got to work kind of randomly too...


I can't post the code here... but this is the instagram video of what I achieved yesterday...


I arrange the lettering in flash and export it as a svg, which I then grab the points from



Link to comment
Share on other sites

Hi mimeartist,


The 'leaves forming a S' is another story.


To randomize an array, to stagger elements is a perfect job for GreenSock.
Together with some cool maths there is a lot of kinky animations possible.


Here a cool pen of DIACO - "Autumn falling Leaves":  

See the Pen KdmwMb by MAW (@MAW) on CodePen


But that is not my field of skills.

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.
  • Create New...