Bezier Path Animation Fun

[swampthang]

I'm playing around with

See the Pen bpXpYv?editors=0010 by osublake (@osublake) on CodePen.

from some time ago. I love the simplicity of the way it works without all the hassle of handles, etc. What I'd love to be able to do, is start with a simple line like that (with 3, maybe 4 points) and add the ability to click to remove, or click the line to add another point. 

 

Had anyone done something like this? Something that would merge the 2 in a very simple way?

See the Pen MGmZbP by swampthang (@swampthang) on CodePen.

[Carl]

take a look here: 

The instructions for editing the path (adding points, converting to corners, etc) are the same as CustomEase in the Ease Visualizer

 

 

 

https://greensock.com/docs/Easing/CustomEase

[swampthang]

Wow, Carl, that's awesome! Will play with that. Any closer to making that an official plugin?

[GreenSock]

2 hours ago, swampthang said:

Any closer to making that an official plugin?

 

No, that was never our plan. I was very reluctant to even share that with anyone, lest it create expectations. I probably shouldn't have even mentioned it in the forums, but hopefully it helps you somehow. 

 

Enjoy!

[swampthang]

Thanks, Jack. I'm seeing some issues with it in my setup so probably will go a different direction. What I need really only requires a simple setup so, hey, maybe it's time for me to become more intimately familiar with bezier's!

[swampthang]

I've trying to stay with quadratic bezier control-points. I know this isn't a GSAP option - GSAP is working exactly as expected - as usual  but here' a new codepen with an additional end-point and control point. It works but the second control point handle isn't being calculated properly when the previous end-point or new end-point is dragged. Wracking by noggin trying to figure out why. 

 

See the Pen YLQJzZ by swampthang (@swampthang) on CodePen.

Edited May 3, 2018 by swampthang
Updated link to codepen that now works

[GreenSock]

Looks like you just had a typo in your code:
 

//BAD: 
var p4y = p4.y * 2 - (p5.y + p5.y) / 2;

//GOOD: 
var p4y = p4.y * 2 - (p3.y + p5.y) / 2;

 

(The first p5.y should be p3.y)

 

Does that help? 

 

Also, this function might be helpful in your adventures: https://greensock.com/docs/Plugins/BezierPlugin/static.bezierThrough()

[swampthang]

Wow, Jack, thanks so much. As long as I've been doing this, I still can stare right at a mistyped variable and miss it. That was it!

...and thanks for the push to bezierThrough. I think I see what you're talking about in terms of how that could be useful in fleshing out more complex paths.

[GreenSock]

1 minute ago, swampthang said:

As long as I've been doing this, I still can stare right at a mistyped variable and miss it.

 

Happens to the best of us!  

[swampthang]

I'll leave that codepen there for anyone who might be interested in playing around with it. Thanks again for the help, Jack.

[OSUblake]

Hey @swampthang

 

Here's a fork of your demo using the .bezierThrough() method that @GreenSock mentioned. It's usage can be a little confusing, but it can make some nice looking motion paths.

 

See the Pen gzvOWG by osublake (@osublake) on CodePen.

 

 

 

[swampthang]

Wow, Blake. Great demo! That does a great job of showing off the curviness property. Contrast that to the one from which it was forked.

 

UPDATE: I added a fork of Blake's version with a field for setting curviness and a reset button for the bezier. 

 

See the Pen ELQmpG?editors=1010 by swampthang (@swampthang) on CodePen.

 

Edited May 9, 2018 by swampthang
addition

[swampthang]

I'm playing with reversing the animation along with auto-rotate and wondering if there's a way to keep the plane in the following codepen from flying upside down. I'd like to figure out a way to be able to follow a path moving forward and then backwards with autoRotate but not turn upside down. Any way to automatically do this?

 

See the Pen wjXrYw by swampthang (@swampthang) on CodePen.

 

 

[PointC]

Maybe something simple?

 

TweenMax.set(plane, {scaleY:-1});

 

Just a thought. Happy tweening.

 

[swampthang]

Yea, I thought about that too, but, for example, if a path makes a hard turn, the object rotates around it, as you might expect. What I'm wondering is if there's a good, clean way to detect that sort of change in a path and auto adjust scaleY or if there's possibly a setting for that. I know there are some options for autoRotate but my feeble brain is going 'tilt!' Take a look at this pen to see what I'm talking about. Would love to keep the airplane upright at each turn when auto-rotate is set.

See the Pen 83312dace46f137a947bc2ba9500a604?editors=1010 by swampthang (@swampthang) on CodePen.

 

[GreenSock]

There are a lot of ways to tackle that, but here's one: 

See the Pen eb63348bf4588170c8c14f8e0a1beb00 by GreenSock (@GreenSock) on CodePen.

 

I'm just using ModifiersPlugin for scaleY and using some conditional logic so that if the rotation exceeds 90 degrees in either direction, it inverts the scaleY. Is that what you're looking for?

 

[swampthang]

What an awesome and simple solution! Thanks a million, Jack!

[ishaan-puniani]

Hello,

nice solution, Just wondering is there any way to have variable speeds / acceleration / declaration values to be configured while traversing an object in between bezier path points?

[mikel]

Hey @ishaan-puniani,

 

Welcome to the GreenSock Forum.

Here are two threads with examples of @OSUblake

 

 

Happy tweening ...

Mikel