Learn How to Animate a Single Moving Part: Create a GIF Video of a Scrolling Web Page
Videos are a great tool for creating a more immersive browsing experience for your website visitors. They can be educational, informative, and entertaining. Fortunately, you don’t need additional video editing software to make your own simple video animations. Any copy of Adobe Photoshop can also do this trick with a GIF animation. Instead, make your own Photoshop animation with ease.
This tutorial will create a Photoshop animation that mocks a scrolling web page as seen shown on a computer screen. The web page scrolls down until the bottom slowly, then returns to the top rapidly.
Assemble the graphic pieces desired in the Photoshop animation.
First, insert a desktop computer image, a web page screenshot, a computer glare image to lay on top of the screenshot for a touch of realism, and a background. Then, resize the screenshot to fit the width of the computer viewport, and align it with the top of the viewport. Keep all pieces needed for the Photoshop animation GIF on separate layers. Finally, don’t forget to label!
Hide the overflow.
It’s very likely the web page screenshot will be taller than the computer viewport. This is necessary to achieve the scrolling effect. However, the overflow must be trimmed. Create a selection of the computer viewport, select the screenshot layer. Afterwards, create a layer mask to reveal selection. The screenshot overflow is now hidden.
Unlink the screenshot from its layer mask.
Click the chain icon in between the two thumbnails of the Layers panel. As a result, the screenshot can move independently. Now all the pieces are ready for the Photoshop animation GIF.
Create the GIF animation video timeline.
In the Application bar across the top of Photoshop, open Window > Timeline. A button appears that reads, “Create Video Timeline” with a downward carot for a dropdown menu. The dropdown menu allows users to select “Create a Frame Animation.” However, the video timeline is exactly what we need, so go ahead and click the button. Immediately a timeline appears. Each layer receives a purple box that indicates the duration of its animation in the video. The numbers in the X-axis across the timeline are, you guessed it, measurements of time. Seconds are marked in the 00:00 format, and increments of seconds appear as frames.
Mark the starting keyframe of the first tween.
The first tween of this Photoshop animation GIF is the scroll to the bottom of the web page. The second tween is the scroll back to the top.
- In animation vernacular, a motion tween is a series of rapidly succeeding images that create the sense of movement.
- A keyframe is simply a starting or ending point of a tween. Video animation software automatically creates the series of images (or frames) that visually connect the keyframes.
Photoshop offers several tween options. Clicking the down carot on any layer of the Timeline panel (not to be confused with the Layers panel to the right) lists tweens for Position, Opacity, Style, Layer Mask Position, and Layer Mask Enable. Above the layers is a square, half-filled icon that enables tween Transitions such as Fade, Cross-Fade, and Fade to Black.
To create the video, we must mark what kind of tween and when it occurs on the timeline. Since the only moving part of this video animation is the scrolling web page, select that layer. Then, the only element change necessary for the scrolling effect is Position. Next look at the timeline and move the blue scrubber all the way to the beginning at 00:00 if it’s not there already. This will start the tween immediately upon playing the video.
For a pause before the animation takes effect, move the scrubber later down the timeline. With the scrubber in place, click the stopwatch icon beside Position. A yellow diamond now appears both beside the stopwatch and again on the timeline at 00:00. Diamonds indicate keyframes; yellow indicates which element is currently selected.
Extend the timelines to increase the video’s duration.
My web page screenshot is pretty long. Viewers need enough time to visually process what I’m showing. So, the tween can’t happen too fast or viewers will miss valuable information. Therefore, I decided to extend my timeline duration to 12 seconds. To modify timeline duration, click the right edge of a layer’s purple box and drag it left to shorten or right to extend time. Zoom in or out on the timeline by clicking the mountain icons at the bottom of the Timeline panel. Once the first is drawn, the others will snap at the same place. Then I dragged the web page screenshot layer’s purple box to 12:00f for 12 seconds. Although layer duration can vary in GIF animations, I want all layers to be visible the whole time. As a result, I extended each layer’s purple box timeline to 12:00f also.
Mark the ending keyframe of the first tween.
Move the scrubber somewhere late in the timeline, say 09:00f. Select the web page screenshot layer and select the Position tween again (without hitting the stopwatch). Once the scrubber is in the right place, we can start animating movement.
Animate the downward scrolling.
Select the web page screenshot layer from the Layers panel to the far right.
Remember how the image was unlinked from its mask? Click the image thumbnail, then the click Move tool from the Tools panel.
Click, shift, and drag the screenshot upward a distance. Repeat as needed until the bottom is reached. The shift key locks the movement to 90 degree increments so there’s no side-to-side movement during the scroll.
To change position, you *must* click and drag the layer. Unfortunately, the Transform tool or pressing keyboard arrows fail to register position changes. By clicking and dragging the layer, Photoshop detects the change in position and automatically creates a new keyframe at the scrubber’s current time stamp of 09:00f.
Animate the upward scrolling.
Return to the Timeline panel, grab that scrubber, and move it all the way to the end, 12:00f. Then select the screenshot layer from the Layers panel and the Move tool from the Tools panel again. Finally, click and drag the screenshot so its top is at the top of the viewport once more.
Watch the Photoshop animation GIF.
In the Timeline panel, click the “Go to first frame” (with the dash-then-triangle symbol, farthest left) to return the scrubber to 00:00. Hit Play. Watch the screenshot scroll! It scrolls more slowly where the left distance between keyframes was great, and it scrolls quickly where the distance was short. The GIF animation is nearly complete.
Add a visual pause.
Alternatively, if a pause after the scroll to the bottom is desired, another keyframe must be added. The pause can start where the first downward scrolling tween ends at 09:00f, then linger for a half-second before scrolling up. Move the scrubber halfway between the 09:00f and 10:00f. The movement already started. So with proper elements selected, click and drag the screenshot to re-position it at the bottom again. If re-alignment is difficult, move the scrubber back to 09:00f to see where things lay. Firstly, drag a horizontal guide from the ruler above and set it. Next, return the scrubber to 09:30f, and click-drag the layer as needed. As a result, there’s a pause before the screenshot scrolls up.
Modify timing within the GIF animation.
To modify timing, timeline pieces can be clicked and dragged into new positions. Extend the GIF animation video by dragging the purple boxes and the keyframes diamonds to the right. (Be sure to keep the keyframes in order and similarly spaced.) (Shorten by dragging everything to the left side of the timeline.) Then, select and move multiple keyframes at a time with click-shift. Finally, test by playing the video again until you’re satisfied with the new timing.
Save the Photoshop animation GIF video for the web.
One of the most compatible video formats is the .GIF. In the Application bar, go to File > Save for Web… and select the GIF format. The preview may take a moment to load.
Correct any colors.
Nearly always my Preview reveals some color distortion as Photoshop compresses my images and their palette. There’s a quick fix for that before you export your GIF animation video. In the more options dropdown menu of the Color Table, select Sort by Luminance. First, double-click the bottom-most, right-most color to open the Color Picker. Then change the value to white, either by entering the hexadecimal #ffffff or 255 in R,G, and B values. The preview will update by switching out the lightest hues with white. Continue switching until the preview looks good.
Choose looping options and save.
Conclusion & The End Result
Making GIF animations in Adobe Photoshop is relatively easy, and for limited subscriptions, more accessible than alternatives. Much more can be done with Photoshop GIF animations too. Try moving two layers simultaneously, or adding transitions. The next blank canvas is yours!