What are falling animation effects?
Adding falling animation effects to webpages is a way to make elements on a website drop down a page. Although you can just upload an animated video of content falling, using the Gravity effect on Hatch will elevate the website experience you create. With the Gravity effect, you can make your pages actually interactive. This means that users can play around with the page and experience it in totally novel ways. Watch the video tutorial and check out the step-by-step instructions below.
Interactivity makes it fun for your audience because they’re actively playing on your pages. It also makes for a memorable web experience. The best part is, there’s no code required to make any of this happen! Anyone can make these webpages.
How can I use Falling Animation Effects on my webpages?
Gravity makes things fall, float, bounce, and knock other things around. Whether uploading photos, videos, illustrations, social media icons, or elements from our content libraries– you can apply Gravity to any content. There are endless opportunities to use Gravity effects to make falling animation effects on webpages.
Gravity in games
You’ve probably seen a website or application that’s used Gravity. Perhaps it was in a game that you played. You may have maneuvered your character around an environment where it could jump and move. I bet your character didn’t fall through the floor very often though. Instead, the designers made the character abide by the normal laws of physics. How else would you understand what to do?
Falling effects are simply mesmerizing
Ultimately, user experiences that allow you to actually play with a site elevate the experience. Gravity is more than just a designed animation video that plays in the background. An animation is basically a static video that doesn’t invite anyone to interact with it. By adding effects like Gravity, we invite people to engage with sites in fun and new ways. These design pages mimic real world physics. We can make spaces that emulate the real world, with crashes, drops, and cool floating elements.
Take your site to the next level by combining effects
Combining Gravity with the drag and drop effect in Hatch makes sites tactile like no other. We can make interactive sites that float, fall, and bounce around- all at the touch of a cursor. Drag the elements to knock things around, or make mini games to augment a portfolio website and be truly memorable. Pages that combine these effects stand out. Try it on your portfolio sites, personal sites, or landing pages to make your webpage different than other sites on the web.
Check out this link-in-bio webpage that allows you to grab the illustrations and knock the other animal heads around. It’s super satisfying to play with!
How to make things fall with gravity
Using Gravity is tricky! This is an advanced Hatch feature, so make sure to start with either of these Gravity tutorials. Let’s try not flying too close to the sun and begin with a Gravity primer. How do we make things fall?
Use a Physics Kit to help you out
Looking to design an elevated portfolio site, event invite, or link in bio using Gravity? We put together an easy-to-use physics kit to help you make the interactive webpage of your dreams. Everything you need to make your content float, fall, and bounce around is available in the physics kit. Skip to the kits tutorial at the bottom of this article to get started.
Want to design your Gravity effect from scratch?
If you love experimenting and exploring new media tools, this method may be for you, especially if you’re looking for no-code solutions. We’ll guide you through the process of accessing advanced features like Animation and Gravity.
Directly below are step-by-step instructions to add falling animation effects to webpages from scratch. You can also watch the video tutorial to see the step-by-step instructions for the same falling animation effects.
How to make images fall using gravity
1. Click your profile button in the top right hand corner of the screen.
2. Click “Enable Under Construction” to access advanced features like Gravity and Animation.
3. Navigate to https://hatch.one/@play/icarus-falls/edit or open a new project.
4. Pull up “elements” on the left panel.
5. Scroll down to advanced elements. Click “physics”.
6. Next, click “uploads” on the left panel to upload your own content.
7. Click “upload” and choose your file. You can upload photos, audio, and video up to 30 mb.
8. Select your uploaded image to add it to your project.
9. Place your image where you want it to begin falling. Make sure to have it selected for the next step.
10. On the right panel, click “Effects”.
11. Click “add an effect”.
12. Scroll down the list of effects until you get to “Physics Properties”.
13. The default settings for the Physics Properties are to fall, so we’re done here and your effect is ready to go. Click “Preview” to watch your content in action. Your uploaded image should fall on your screen.
Video tutorial: How to add falling animation effects to webpages
How to make images fall using Hatch kits
1. Select the object, photo, video, illustration, or asset you’d like to make fall.
2. On the left panel, click “kits”.
3. Choose the “physics kit”.
4. Since we want to apply physics to an asset already on our page, we can scroll all the way down to “add physics to anything”. We’ll choose the “falling circle effect”. This just means the asset will act like a circle instead of a square. This is especially useful when it comes to collisions, which you can explore in advanced Gravity tutorials.
