Physics2d example for JS

[rochekaid 1 Likes (Newbie)]

Hi,

 

The plugin example page is a great way to test parameters, http://www.greensock.com/tweenlite/#plugins.  

 

Specifically, I am working with Physics2d.  Is there a page that shows the example as a JS file as opposed to Actionscript?

 

Am I missing something?

 

 

 

[GreenSock 18,576 Likes (Superhero)]

There isn't a demo page yet, no, but the code is pretty much identical for JS as it is in AS. You're welcome to use that AS example to find the values you want to plug in. Also, here's a codepen of the animation on our home page that has some physics stuff: http://codepen.io/GreenSock/pen/b9133e0af7101adb4d7517f10b34c3ed (you'd look in the "control(){ }" method. 

[rochekaid 1 Likes (Newbie)]

Thank  you for this codepen! it certainly helps.

I am trying to find a way to add a background image to the .dot class. Is this possible? I'd like to replace the particles with leaves for example.  Simply adding a 'background-image: url('http://example/leaf.png');' does not seem to work.  I tried adding it to the js as well into this line of the codepen code but couldn't figure out anything that works:  

 

initialVars = {css:{borderRadius:"50%",  width:100, z:0.1}, immediateRender:true}

 

Any advice (clearly, I'm a newbie at this)?

[Carl 11,164 Likes (Superhero)]

You can add a background image by changing the .dot css:

 

.dot {
  position:absolute;
  background-color: #91e600;
  width:250px;
  height:250px;
 background:url(http://www.wpclipart.com/plants/leaf/leaf_5/soft_focus_leaf.png)
}

and in the js, just make sure nothing is changing the width.

 

Look here:

 

http://codepen.io/GreenSock/pen/2cd4c8919fa4d5adbb8bb5be314ce9b2/

[Carl 11,164 Likes (Superhero)]

FYI here is a simplified Physics2D example that should allow you to play with some values.

 

http://codepen.io/GreenSock/pen/3a4ce0aaecb8f13c3465f93da4cd389a?editors=001

[rochekaid 1 Likes (Newbie)]

Thank you...You guys are awesome!  I'm loving this library and it's plugins...the particles are working great with scrollmagic, fyi.