Animating along a bezier curve, Newtons cradle

[joe_midi]

Hey guys, 

 

I'm a complete noob when it comes to animating along bezier curves. (I've never needed to use it until today).

 

http://cdpn.io/synLJ

 

I've got 6 circles dropping down and swinging to the right and then the left.

 

I'm happy with what I've got up until that point.

 

However when I want it to sit back in the starting point. I can't quite get it to look okay. 

 

Anyone got any tips?

Or know of tools that I could use to get the right values?

 

Cheers guys!

 

 

[Rodrigo]

Hi Joe,

 

Sorry but I'm having problems understanding what is exactly the problem.

 

The circles stagger to their current positions from above, then they swing to the right, then to the left and finally they get to their original position. According to your post, what exactly is not right about that last part of the timeline (when the elements go back to their original positions)?.

 

Again sorry for being too lineal about it but my mono-neuronal brain is going to need more info

 

Best,

Rodrigo.

[joe_midi]

I may of played around with it a bit more than when I originally posted the question.

 

I feel that the last part of the animation:

 

Line 10: [From left to center]

.staggerTo(revButtonArray, 2, {bezier:{type:"soft", 
values:[{x:-250, y:-80}, {x:0, y:20}, {x:0, y:0}]},
 ease:Quad.easeInOut}, 0.05);

To me it doesn't flow as smoothly as it does when its animating through Line 9. [From right to left]

 

I guess my question is really, are there any tutorials on working with bezier curves with GSAP?

 

For the most part the I really like the animation. I just feel that the last animation isn't following the correct arc. But I can't figure out the values I would need to get it right.

[Rodrigo]

Hi,

 

What you could try is a middle point width negative values. The positive y value takes the elements below their final position, therefore before the animation ends the elements go down and up, which is not the behaviour of the rest of the animation.

.staggerTo(revButtonArray, 2, {bezier:{type:"soft", 
values:[{x:-250, y:-80}, {x:-175, y:-20}, {x:0, y:0}]},
 ease:Quad.easeInOut}, 0.05);

That should make the elements keep a more "normal" swing pattern.

 

The x and y thing is a little tricky, keep in mind that no matter what the top and left values of any element are, the x and y are always 0 when the document is rendered, unless of course you changed in the CSS using the transform property, so when you have all the circles lined up before the bezier animation starts all their x and y values are 0.

 

Also another suggestion would be that instead of creating two arrays you could use javascript's reverse function in order to reverse the array, you could add some callback to reverse the array before the next tween instance, like this:

var elements = $(".elements"),
    tl = new TimelineLite();

tl
    .add(reverseArray)
    .to(elements, time, {vars})//this will make the element farthest to the right start first
    .add(reverseArray)
    .to(elements, time, {vars})//here you swing the elements to the left
    .add(reverseArray)
    .to(elements, time, {vars});//here you swing the elements back to center

function reverseArray()
{
    elements.reverse();
}

You can see the reference here:

http://www.w3schools.com/jsref/jsref_reverse.asp

 

Best,

Rodrigo.

[joe_midi]

Hey Rodrigo,

 

Cheers for all your help.

 

Yes, I found the code reverse array thing just after I posted that codepen. But sometimes my mind doesn't think of things quick enough and I end up writing things just to get it working.

 

I didn't use a call back tho.

   .staggerTo(buttonArray.reverse(), 2, {bezier:{type:"soft", values:[{x:0, y:20}, {x:0, y:0}]}, ease:Quad.easeInOut}, 0.05);

I just added the reverse() to the target element, seems to work fine.

 

I don't know if you have any suggestion as to why I shouldn't do it that way tho?

 

Also found that reversing the array fixed most of the motion issue, so it was actually staggering from the correct direction.