Make any element on your webpage bounce, fall, float, and bump around without knowing how to code. In Hatch, it’s easy to add gravity effects to a webpage using our physics properties. In another tutorial we worked with a physics-based template by copying the core functionality. This tutorial will walk through how the physics properties work and how we can customize physics attributes in our editor. Let’s open up a blank project to get started.
First, let’s create an object that we’ll use with physics. We’ll make a ball by clicking on the circle shape under the elements tab.
Create an object we can apply effects to
To find the physics properties options, first select the circle you just made. Now go to the right sidebar, click on effects and scroll down to the bottom (shown in the left image below) to find physics properties. Clicking on physics will open the properties window, as shown in the right image below.
Adding gravity effects to our object
First, we’ll focus on making our circle object move. Within physics properties, the type option allows you to select from three different kinds of behaviors:
- Static: the object will stay in place, but it will interact with other physics objects as a wall or barrier for them to collide with
- Dynamic: the object is affected by forces like gravity, colliding with other physics objects
- Kinematic: similar to static, but you can tell the object to move under certain conditions, ignoring forces like gravity; we won’t be using this type in this tutorial
Because we want our ball to move around, we’ll pick dynamic. And since our object is a ball, let’s click on shape and switch the dynamic boundary to a circle. If we leave this option as “box”, the dynamic area would be treated as a square for collision purposes, with objects bouncing off of invisible corners.
We now create a second object, a rectangle, to work with the ball. Go back to the shapes selection and pick a square this time. We can drag on the sides to make it a rectangle. We can also rotate it by clicking the circle at the bottom of the object, as shown below.
Similarly to the ball, we’ll access the physics properties of the rectangle and change its type to static. The rectangle will now act as a “floor” for our ball to roll down. Hit preview on the top right of the project and watch the ball slide right off the slope we just made.
Let’s experiment! Increase the “friction” value of either the ball or the slope and try again. See what happens? Bounce like a brick, a tennis ball, or something in between by playing with the “bounciness” value of the ball.
Customizing speed and direction of our objects
Next, we’ll look at the Forces section near the bottom of the physics property menu. Click the arrow to expand and you’ll see options to define more aspects of the object’s movement. Here you can modify how fast an object moves, its initial trajectory, and even its ability to rotate.
Let’s take a look at the first two sliders: impulse strength and impulse angle. The former starts out at 0, which means it’s disabled. If you increase its value (by dragging the slider right), this will give an initial push to the object. The impulse angle determines the direction of this push. So let’s set the variables for the ball up like so with an impulse strength of 5 and impulse angle of 90, as shown below.
When you preview the project now, the ball will quickly move to the right, past the edge of the page. This is a quick and easy way to set up basic moving patterns.
But if we want our object to keep moving in one direction we’ll add forces. Let’s set the Impulse values back to 0 and work with force strength, set to 20 and force angle set to 90. These options are further down the window, as shown below.
Playing with gravity to change our object’s trajectory
Now that we’ve added directional forces to our ball, we are going to disable gravity to see what happens. Click on advanced at the very bottom to find the gravity scale value. The default setting of the gravity scale is 100, which means the object is 100% affected by gravity. Increasing the value will make it drop faster than natural gravity, and setting it to 0 will remove the effects of gravity entirely! This lets you have full control over the trajectory of any object.
Let’s experiment! Set the forces sliders back to 0 and try changing the gravity value. Set gravity to 10 to have the object slowly fall to the ground. If you use the impulse sliders to give the object an initial boost, you can make it glide across the screen!
As you can see, Hatch makes it easy to add gravity effects to a webpage without code. Try moving physics sliders around one at a time to see what happens. You can add physics properties to photos, stickers, gifs and text. We can’t wait to see what you make!