What is the camera pan effect?

Imagine having your very own mini digital director who followed your uploaded image as it bounced around your website page. To do this on Hatch, we need to animate a webpage with a camera pan. This process makes creating animated scenes, stories, or just plain cool website animations super easy to make.

The camera pan effect is an effect that centers the screen around an object as it bounces, flies, falls, or is animated around a screen. This effect allows you to make scenes that change and move along those scenes. 

The camera pan effect enables easy animation building that creates awesome website scenes, as seen in this comet animation below.

How do you start to animate your webpage with a camera pan?

To make camera pan work, you’ll need to turn on “under construction” to have access to two advanced but exciting features: animation and physics. These are the two essential effects that camera pan works well with. Learn how to access advanced features here.

When it comes to creating interactive webpages, combining effects on Hatch can make sites stand out in completely new ways. 

Combining effects: animation + camera pan

The above example of the train worked by following a scene that was laid out horizontally. To animate your webpage with a camera pan, you need to add camera pan to an already produced animation. The train window was on a moving track, and then we added camera pan to follow it. Once we added camera pan and set up our animation, we then toggled ”follow x” in order to recreate this effect. Feel free to also remix this project and deconstruct it to understand how it works. You can do this with most Hatch projects. It’s a great way to learn how to use the tool and level up your interactive web design skills!

Below is another example of combining the animation effect with the camera pan effect. This example was designed to be a scene that changes as it moves from top to bottom, so the camera pan effect follows the y axis.

Combining effects: physics + camera pan 

With the ability to combine effects, your digital visions can become a reality. To produce a unique digital experience, look no further than combining the physics effect with the camera pan effect. Making animations from scratch is tedious and hard to do when you have so many illustrations and elements to move. With the camera pan effect, you make all the scenes on one page and then have your character become the camera. This is how you use the camera pan effect for easily animated websites.

In the example below, the camera follows the illustration of Icarus as he falls down the page.

Sure, websites with just one effect are cool on their own. In this falling animation tutorial, we show you how to use physics to make objects fall on the screen in real time. We applied this physics effect to an illustration, but it can be applied to photos, videos, text or other media. You can even apply it to buttons, but let’s be real… that may make clicking it a bit harder to do. 

In the previous example where we didn’t use camera pan, Icarus falls off the screen. 

Why is camera pan a cool effect?

Physics simulations are cool on their own, just as animations are. Effects are just so much more exciting when combined to make them come alive. It’s so easy to do this on Hatch if you just use the camera pan effect for easily animated websites.

Imagine sites that dance with your cursor or links pages with characters that you can play with. Sure you could make an animation and export it as a video, but can you make it interactive like physics? Can you easily automate an animation the way camera pan allows you to?

Whether you create websites and experiences with full blown gamification or are just here to add subtle effects to your sites, using Hatch to make interactive and animated sites is such a fun process for creatives, designers, musicians, and anyone trying to create awesome digital content!

Let’s get started with the step-by-step tutorial below. You can also check out this video tutorial.

How to animate your webpage with a camera pan

1. Open a project on hatch.one or start with our Icarus tutorial template.

2. You must select the object you want to apply effects to. In this case, you want to follow Icarus as he falls out of the frame and down the page. Let’s select Icarus.

3. On the right panel, you then click “effects”.

4. You’ll scroll down until you find “camera” and click that.

5. All our effects show up on our right panel under “effects”. Now you can toggle effect properties. You can see physics was already applied (watch the tutorial for that here). Camera pan comes up here as well.

6. Icarus falls along the y axis, so you only need to have “follow y” toggled on. You can turn off the rest of the settings.

7. Click “preview” to see Icarus falling endlessly down the page.

Video tutorial: How to animate a webpage with a camera pan

How to access advanced features on Hatch

Physics and animation features require “under construction” to be turned on.

1. Click your user icon at the top right hand corner of the screen.

2. Click “Enable Under Construction”