Physics

How it works

Physics is a nestable widget. You can put any content inside by using the Content repeater control: custom code, templates, global widgets and shortcodes.

It is essential to understand between the widget’s Content and the widget’s Physics Elements.
Content: the content to show inside the Physics widget that won’t become a Physics Object.
Physics Elements: the content to show inside the Physics widget that will be come a Physics Object. Each Physics Object is independent and unique when interacting with it on the canvas.

Physics objects

Shape: It will determine the shape of the object. There are 3 shapes available: rectangle, circle and polygon. It is very important to choose the correct shape, specially if you want to use an image as the background of the object. This is, because the object should match the image exactly as the object defines the collisions and the image is just a texture for it, so it doesn’t make sense to have a circle image and choose a polygon shape.
Horizontal position: determines where the element will start at the container (Physics element) at the X axis. Just like a margin left.
Vertical position: determines where the element will start at the container (Physics element) at the Y axis. Just like a margin top.
Width, Height & Border radius: will determine the dimensions of the object and it’s collision borders.
Image: we can upload an image to have it as the texture of the object. It won’t replace the object dimensions and border collisions as it is just a texture for it. It makes sense to have the object matching it’s texture dimensions, so you should adjust the object’s shape, width, height and border radius to match the texture.
Image scale: to scale the image texture at the object. It is specially useful if we have objects of width: 100 and height: 50 and our image is width: 200 and height: 100. In this case we would just apply a scale: 0.5 to make the image match the object.
Static: if enabled, the object won’t move.
Restitution: determines the elasticity of the collisions.
Friction: the resistance of the object when moving over the surface.
Friction Air: the resistance of the object when moving through the air.
Density: the mass of the object relative to it’s dimensions.

Settings group

Horizontal gravity: determines the gravity at the X axis.
Vertical gravity: determines the gravity at the Y axis.
Time scale: determines the speed of movements and collisions at the world generated at Physics.
Mouse stiffness: determines the friction of user’s cursor when interacting with objects.
Wireframes: if enabled, only the collision borders will be visible. It is very useful to check objects dimensions, specially if they have textures on them.

Walls group

At this section you can enable and disable the walls you need and style them at pleasure. Walls will define the world collision borders for all the objects inside. Walls are also objects so they have styling limitations.

ScrollTrigger group

Physics element uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.
Trigger: the element that will init Physics on scroll. Use the keyword “this” to use the element itself as the trigger.
Start: determines the position of the Trigger to init Physics. “top bottom” means when the top of the element hits the bottom of the viewport.