Beziers

[mimeartist]

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?

 

 

thanks,

James

[Carl]

Can you provide a small demo with 2 curves? I don't know what you mean "reach each control point at the same time". If you are asking what I think you are asking I don't think it will be easy.

[mimeartist]

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?

 

James

[Carl]

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

[mimeartist]

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!

James

[mikel]

Hi mimeartist,

 

its a bit tricky and more a fun for me - I love SVGs and to animate them:  

See the Pen JNXRJx by mikeK (@mikeK) on CodePen

 

Instead of handmade curves there will be definitely a generating formular ...

 

Happy topping

 

Manfred

[Carl]

James, Glad to hear you have something that works.

 

Manfred, Great job! you make it look easy.

[mimeartist]

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

 

https://www.instagram.com/p/BTHTmeilNRd/?taken-by=jameseverettstone

[mikel]

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.