Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rochekaid

Physics2d example for JS

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

 

 

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 2 weeks later...

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)?

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×