Photoshop GIF How-to: Scrolling Animation

Animation. The web page template for a Case Study appears to scroll down to the bottom of the page, pause, then returns to the top again.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

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 videos. Any copy of Adobe Photoshop can also do this trick with an animated GIF. Make your own Photoshop animation with ease, a simple scrolling web page animated GIF. Follow along to make a Photoshop animation that of a scrolling website as seen shown on a computer screen. The web page scrolls down until the bottom slowly, then returns to the top rapidly.

Animate a Single Moving Part: Create a Photoshop Animation of a Scrolling Website

Animation. The web page template for a Case Study appears to scroll down to the bottom of the page, pause, then returns to the top again.

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!

Step 1: Assemble the graphic pieces desired in the Photoshop animation.

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.

Next, create a layer mask to reveal selection. The screenshot overflow is now hidden.

Step 2: Hide the screenshot overflow with a layer mask.

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.

Step 3: Unlink the screenshot from its layer mask.

Create the Photoshop 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.

Step 4: Create the Photoshop animation timeline.

Mark the starting keyframe of the first tween.

The first tween of this Photoshop animation is the scroll to the bottom of the web page. The second tween is the scroll back to the top.

Photoshop Animation Vocabulary:

  • 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.

This Photoshop animation of a scrolling website focuses on just one layer (the web page) and one kind of tween (Position).

Go to 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.

Step 5: Mark the beginning keyframe of the first Position tween.

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.

To help see, zoom in or out on the timeline by clicking the mountain icons at the bottom of the Timeline panel. Once the first purple box 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.

(Update: In my later After Effect tutorials, I discovered After Effects lets me adjust multiple purple boxes at a time!)

Step 6: Extend the Photoshop animation's purple timelines as needed.

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 to put it in focus, then also the Position tween again (without hitting the stopwatch).

Once the scrubber is in the right place, we can start animating movement.

Step 7: Mark the ending keyframe of the first Position tween.

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.

(Update: late Photoshop CC 2019+ now track movements from arrow keys.)

Step 8: Animate the downward scrolling.

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.

Step 9: Animate the upward scrolling.

Watch the Photoshop 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!

The website scrolls more slowly where the left distance between keyframes was great, and it scrolls quickly where the distance was short. The Photoshop animation is nearly complete.

Step 10: Watch the Photoshop animation GIF.

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.

First, drag a horizontal guide from the ruler above and set it. Then, return the scrubber to 09:30f, and click-drag the layer as needed. Finally, there’s a pause before the screenshot scrolls up.

Step 11: Add a visual pause.

Modify timing within the GIF animation.

To modify timing, timeline pieces can be clicked and dragged into new positions.

Extend the Photoshop animation 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.

Step 12: Modify timing within the Photoshop animation.

Save the Photoshop animation 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.

Step 13: Save for web.

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.

Step 14: Correct any colors in the Photoshop animation GIF.

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!

Animation. The web page template for a Case Study appears to scroll down to the bottom of the page, pause, then returns to the top again.