Drop Div with Gravity, Acceleration, Friction

[FrogOnWheels]

My first post here, so go easy on me

 

I would like to thank Jack the Greensock for developing a fantastic platform and the extremly well understandable documentation to go with it.

 

Thanks to this community where i have found solutions.

 

I'm not a programmer or coder and this is my first time using js GSAP.

I come from a background of operating multichannel DVEs.

I understand the concept and i'm having fun learning to tween with code.

I am building my personal website with Edge Animate and GSAP.

I have about a thousand lines of GSAP code so far, Timelines calling Timelines calling Functions etc. Everything is working as expected.

 

I have a little problem.

 

I would like to revive an old Flash experiment from 2005 and re-create it with GSAP.

 

How would i go about dropping a simple object (targeted div already on the Stage) and have it fall with gravity/friction/acceleration and maybe mass, hit an imaginary ground (pos y) and bounce back up and down until settled.

 

I've attached an swf and fla stripped down to 1 box dropping.Drop.zip

Can i do this with Javascript?

 

The code in the Fla i found somewhere on web in 2005!

I have no idea how to write something like this but i i just tuned the parameters until i got the desired effect.

 

Thanks

 

 

 

[Rodrigo]

Hi and welcome to the forums,

 

Mhh not the easiest trick to accomplish...

 

I wanted to work with some friction tween function some time ago but never got started properly, just some useless trials and some math going around but nothing really useful.

 

For starting a tween with a strong easeIn function, so the element accelerates as it falls. Then when it hits the ground a timeline composed by the amount of "bounces" you wish the element to take and set dynamically how high the element goes on each bounce, but it would take quite some code to achieve that. You could create a function that populates the timeline (that should be paused), through a for loop and reduce the y position each time the loop executes, that will be the real trick. And after the element hits the ground you resume the timeline.

 

Sorry to offer nothing but ideas but I'm a little short of time now. If I can come up with something in the next days I'll post it.

 

Hope this helps,

Cheers,

Rodrigo.

[Carl]

If you want to have all the physics properties you are sort of breaking the mold of how a traditional tween works. With a tween, you define a duration, start value, end value and ease. When you start throwing in physics, the duration and end values are all based on the initial velocity and amount of friction. Its a totally different calculation altogether. 

 

On the Flash side of the fence we offer Physics2DPlugin:

http://api.greensock.com/as/com/greensock/plugins/Physics2DPlugin.html

 

We haven't yet ported this over to JavaScript. In the meantime, Rodrigo's solution where you do your best to pre-calculate the various values on a series of tweens stored in a timeline could definitely get you the results in your supplied swf... but it would take a bit of work for sure.

[FrogOnWheels]

Thanks for the replies.

 

I think i'll put that experiment on hold for now.