Physics

Physics is a nestable block element. You can put any elements at it and edit it’s display settings at the Style tab.
Physics element is built on top of the popular matterjs library.
It is essential to understand that elements at Physics aren’t DOM elements. You can’t create a Heading and drop it at Physics element expecting to create a new Physics object. It will be just a new child at the element.
To create Physics objects, you will have to use the Physics objetcs repeater control.

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.

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.

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. The demo has all the walls with a transparent background and the bottom separator is just an absolute div.

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

– Tamu