Learn How to Animate a Single Moving Part Plus Two Transitions: Create a Fading “Before” Shot Into a Scrolling “After” Shot
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.
My previous tutorial showed how to animate a single moving part, a scrolling web page. This tutorial will create a video GIF animation that shows a “before” shot of a web page design, then fades into a scrolling “after” shot web page design before finally fading to white at the GIF animation’s conclusion. This tutorial will create a video GIF animation that shows a “before” shot of a web page design, then fades into a scrolling “after” shot web page design before finally fading to white at the GIF animation’s conclusion.
Create a new Photoshop document for the GIF animation.
Begin assembling all the GIF animation pieces into a single Photoshop document. Keep each image on its own layer. Then, label like the previous tutorial.
Convert the GIF to Video Animation.
Open Window > Timeline and Convert to Video Animation again.
Extend the default timeline duration of the GIF animation video.
Give adequate viewing time of the before and after shots, including the scrolling of the tall after screenshot. Therefore, make the timeline longer than the default time. First, drag each layer’s purple box out to 12:00f to extend the video GIF animation. To assist with this, zoom in or out on the timeline by clicking the mountain icons at the bottom of the Timeline panel. Then once the first is drawn, the others will snap at the same place.
Create the fade. Add the first Opacity keyframe, leaving a pause.
First in the video GIF animation, a “before” shot of a web page design appears. Afterwards, it fades away to reveal the “after” shot of a web page re-design. Select the “before” layer in the Timeline panel to reveal tweening options. Additionally, to allow a pause on the “before” shot to allow viewers to see it before it fades, the tween simply starts later. Next, move the scrubber to 01:00f before clicking the stopwatch beside Opacity to add the first keyframe. One second passes before any opacity changes take effect, creating that visual pause in the GIF animation.
Add the second keyframe to mark the end of the fade tween.
Move the scrubber to 0:200f. In the Layers panel to the right, change the Opacity of the “before” layer to zero. Photoshop automatically applies a new keyframe to the Timeline to mark the change. Running a test play of the video GIF animation shows the fade quite nicely.
Create the animated scroll. Add the first Position keyframe.
Immediately after the “before” shot fades away and the “after” shot is revealed in its entirety, begin scrolling the “after” layer to the bottom of the web page screenshot. This tween begins at the same time the “before” shot’s fade tween ends, at 02:00f, and manipulates the Position setting. Switch to the “after” layer in the Timeline panel. Click the Position stopwatch at 02:00f to add a keyframe.
Add the second Position keyframe.
The scrolling continues until nearly the end of the GIF animation video—leave 2 seconds to spare. Move the scrubber to 10:00f. Then use the Move tool from the Tools panel to click, shift, and drag the layer to its bottom. A new Position keyframe is automatically added to the timeline at the 10:00f mark. Editing Transform values to adjust X and Y coordinates or using the arrow keys don’t seem as effective for registering position changes in the timeline. So stick with the Move tool. Hold down the shift key while dragging forces the layer to move in 90 degree increments, either straight up and down or straight side to side. This prevents sidetracking for the scroll to move seamlessly downward.
Add a closing Transition to the GIF animation.
Use a pre-made Photoshop Transition to achieve a fade at the very beginning or the very end of the GIF animation video. First in the Timeline panel, click the half-filled square icon to open the Transitions menu options. Note the menu says, “Drag to apply.” Then select the “Fade to White” fade option by clicking it. Next, drag its ghost icon to a layer’s purple box far left or right edge. Photoshop reveals a black outline marking the transition’s duration while you are hovering over an edge. Finally, drop the ghost icon at the end to apply.
Watch the GIF animation.
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 in the GIF animation! It scrolls more slowly where the left distance between keyframes was great, and it scrolls quickly where the distance was short.
Save the GIF animation 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 of the GIF animation may take a moment to load.
Correct any colors for the final GIF animation.
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. In the more options dropdown menu of the Color Table, select Sort by Luminance. Double-click the bottom-most, right-most color to open the Color Picker. Change the value to white, either by entering the hexadecimal
255 in R,G, and B values. The GIF animation preview will update by switching out the lightest hues with white. Continue switching until the preview looks good.
Choose GIF animation looping options and save.
GIF video animations are popular for sharing around the web and engaging viewers. Now, you can create your GIF video animations with Photoshop with increasing complexity.
If you’re looking for a tutorial for a more simple animation, start with my first Photoshop GIF animation tutorial here.
Enjoy your video creations!