Move elements from point A to point B with gravity (Physics2D)

[Vander]

Hi there,

 

I was playing with Physics2D plugin but I think i'm not understanding how it works...

For example, I have an svg with multiple circles and I wanted to set them to higher position, and then, let them fall with gravity and different velocities to the initial position when the user reaches a certain page point. (I'll do it later with a timeline, i think that's not a problem).

 

I thought that just by setting a, per example, Y: -1000 to elements and then move the tween to position y: 0 and add a velocity, angle, gravity, etc.. would it work but can't get the result I want.

 

I'm missing something? Or did I understand it wrong? 

Can anyone explain me what's not working or show me a demo explaining how does the plugin works? 

Codepen's attached

 

Many thanks!

See the Pen NWBvzzO by EricCV (@EricCV) on CodePen

[mvaneijgen]

Seems to work fine right? The only thing is that you had used the default duration: 0.5, which is a bit fast for have something to happen. I've set it to 5 seconds and it seems to work as expected. 

 

See the Pen ZEjJqBP?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Vander]

18 minutes ago, mvaneijgen said:

Seems to work fine right? The only thing is that you had used the default duration: 0.5, which is a bit fast for have something to happen. I've set it to 5 seconds and it seems to work as expected. 

 

 

 

Oh, good to know this duration stuff, i thought that if you just use the default duration, the animation happens faster and that's all.

On the other hand, the svg paths/circles seems not to go to initial position: (y:0 or the position the svg gets if you comment all js code)

 

Any idea? Thanks

[mvaneijgen]

I think the y: property is getting overwritten by the physics stuff, because that is also the property it needs to animate to apply everything related to physics. 

 

Having a duration of 0.5 (the default) will make the physics run for 0.5 seconds and then stop, that is what you are seeing in your demo. 

 

In demo I've updated the duration, so that the physics have more time to do it's thing. 

 

In my last demo I've removed your y: property completely and it doesn't do anything different, so I think (and this seems logical to me) that you can't animate y or x when using the physics plugin, because it needs those properties to animate the physics. See the docs https://greensock.com/docs/v3/Plugins/Physics2DPlugin you can look in to xProp and yProp.

 

See the Pen OJwjaPB by mvaneijgen (@mvaneijgen) on CodePen

[Vander]

2 hours ago, mvaneijgen said:

I think the y: property is getting overwritten by the physics stuff, because that is also the property it needs to animate to apply everything related to physics. 

 

Having a duration of 0.5 (the default) will make the physics run for 0.5 seconds and then stop, that is what you are seeing in your demo. 

 

In demo I've updated the duration, so that the physics have more time to do it's thing. 

 

In my last demo I've removed your y: property completely and it doesn't do anything different, so I think (and this seems logical to me) that you can't animate y or x when using the physics plugin, because it needs those properties to animate the physics. See the docs https://greensock.com/docs/v3/Plugins/Physics2DPlugin you can look in to xProp and yProp.

 

 

 

Yes, as you said Y property does nothing 😕 yProp just let you modify the name of that prop but nothing else or am I misunderstanding?

 

Can't get a good way to achieve what I'm trying. Maybe is there a way to make them drop to the bottom of the page and stack on top of each other in order of arrival but not with that plugin and it should be with custom code, nope?

 

Thanks again for your support, @mvaneijgen

[GreenSock]

Yep, @mvaneijgen is correct - the physics2D animation controls the "y" value, so you can't ALSO tween y separately in the tween (they'd be fighting for control). And the plugin isn't intended to be a whole physics engine with collision detection, etc. So you can't have the elements automatically "stack" or bounce off each other. If your goal is to make "y" stop once it hits 0, that's very doable by using an onUpdate. Here's an example: 

See the Pen BaPwoMX?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Does that help at all? 

[Vander]

On 1/17/2023 at 5:32 AM, GreenSock said:

Yep, @mvaneijgen is correct - the physics2D animation controls the "y" value, so you can't ALSO tween y separately in the tween (they'd be fighting for control). And the plugin isn't intended to be a whole physics engine with collision detection, etc. So you can't have the elements automatically "stack" or bounce off each other. If your goal is to make "y" stop once it hits 0, that's very doable by using an onUpdate. Here's an example: 

 

 

Does that help at all? 

Many thanks @GreenSock

Could be one solution but i think it's not really what i'm looking for, cause it's position is random when you refresh and you can't control where they will go

I'll dive in and search for a collision detection to stack elements one above the other one when they fall, also it's strange when the (for example) orange circle stops before the yellow one reaches the bottom

 

Do you know if maybe working with another plugin and physics would help? Or any funny idea? I'm a bit flexible about it but can't find a consistent solution (I can use your premium plugins also!)

 

Have a good morning guys  

Edited January 18, 2023 by Vander
Missed something