Parallax scrolling adds a bit of a storytelling element to web designs while providing a touch of depth and interactivity to otherwise static sites. Adding parallax scrolling and animated text effects to a web banner is a great way to engage the attention of site visitors and inspire them to explore it further.
Recently I've been creating different types of banner designs using the Adobe Edge Tools & Services. My exploration of web typography, scripted text effects, and the Edge tools led to some fun results, so I set out for a deeper dive. This article focuses on animation techniques in Adobe Edge Animate CC with a few new twists.
In addition to text effects, I've been experimenting with parallax scrolling effects. You can create parallax scrolling by synchronizing a scroll bar with a timeline in Edge Animate CC to deliver an interactive animation in which the viewer can use the scroll bar to control the composition. It's a fun exercise in interactivity, animation, and storytelling.
For this project, I created a tutorial that walks you through the steps of building an interactive scrolling banner (see Figure 1). This article provides an overview of key concepts, along with video screencasts that demonstrate the workflow. The supplied files include the full tutorial and all the assets you need to produce the composition on your own.
If you'd like to deconstruct the project or follow along with the tutorial, be sure to download the supplied files and install the related Adobe tools.
I used Edge Animate CC to set up the scrolling banner and designed it to be three times the width of the viewable area in the composition (see Figure 2) to activate the scroll bars around the
div tag containing the banner. I turned off the Autoplay feature for the animated timeline inside the banner by default. Instead, I synced the position of the timeline to the position of the scroll bar so that as you scroll back and forth, the banner animation plays forward and backward in sync.
You can set up the synchronization between the scroll bar and the banner's timeline fairly easily with a little code. The tricky part is setting up your animations along the timeline so they appear in frame during scrolling. This tutorial takes you through the steps to creating these effects.
The following section includes an overview of the steps and screencast videos to help you become familiar with the key concepts in the tutorial. Look for the tutorial section callouts (in blue) to follow along in your own version.
In this section, you can complete steps 1 and 2 of the tutorial (see Video 1).
Video 1. Demonstration of tutorial steps 1 and 2
The parallax_banner folder from the project files contains Illustrator and Photoshop files you can use as starting points for the project.
Create the bulk of the composition using imported SVG and PNG assets. The workflow starts by publishing the SVG files from the design file in Illustrator CC and the PNG logo file from Photoshop CC.
Each Edge Animate CC composition is contained in a stage
div tag. You can set the stage properties so that content larger than the stage bounds is either visible, hidden, or scrollable. Use this feature in combination with animations built along the stage timeline to create scroll motion effects.
In this section, you can complete steps 3 through 5 of the tutorial (see Video 2).
Video 2. Demonstration of tutorial steps 3, 4, and 5
Create a new Edge Animate CC composition and configure the stage by setting the width and height to the banner's visible size and the overflow property to Auto. Deselect the Autoplay option (see Figure 3).
These settings will cause any content placed outside of the stage bounds to force scroll bars to appear. With the Autoplay feature turned off, you can use code to sync the position of the scroll bar to a position on the stage timeline.
In this case, the composition mainly uses text imported as SVG files. However, it's easy to create text directly in Edge Animate CC. This part of the tutorial guides you through creating a text element using an Adobe Edge Web Font and creating your first simple animation (see Figure 4).
At this point, create the starting point of the animation by providing a visual marker showing where the scroll position is along the timeline. Use this feature to help position elements along the timeline in relation to where the scrolling will be in the viewable area of the banner.
Note: I incorporated the visual marker for the purposes of this tutorial. Typically, the marker would not exist in the final production.
This code snippet checks the stage
div element for its scroll position and then determines the corresponding position in the timeline. This synchronization allows the animations built along the timeline to play forward or backward depending on the direction of scrolling.
At this point, the scrolling features and content are set up in the composition. The last series of steps focus on animating the elements on the screen. The interesting thing about this process is working with the viewable frame that's scrolling by and the idea that the animations are scrolling by with it. You can play off this dynamic and use the guide animation to position your work along the timeline.
In this section, you can complete steps 6 through 8 of the tutorial (see Video 3).
Video 3. Demonstration of tutorial steps 6, 7, and 8
One of the cool new features in Edge Animate CC is the ability to animate along a motion path. A motion path is a curved line defining the path of an animation from one point in the coordinate space to another. Motion paths are easy to use and allow you to add points along the path that can be used to draw curves with Bézier handles (see Figure 6).
In the tutorial, the balloon image is animated along a curved path, staying in frame while the scrolling occurs. The result is the effect of the balloon floating through the air over the landscape.
Scroll motion effects create the illusion of depth in a 2D space by using layers. Usually the layers toward the back scroll by slower than the layers in the front. For example, in the tutorial the mountain layers scroll by at different speeds, creating the feeling of depth while the balloon floats by (see Figure 7).
The interesting thing to consider is that the frame is scrolling by in addition to any parallax animations you add to it. I took the approach of animating the Mountain-Back layer to the right at about the same pace as the balloon. This keeps the mountain peak in frame and gives it the appearance of scrolling slower than the layers in front of it. I animated the Mountain-Front layer to the right at half the distance to create the effect of a half-as-slow scroll speed. I did not animate the Foreground layer.
As a final touch, you can embellish the banner by adding a nested animation built inside a symbol. A symbol contains a timeline and can be used the same way the stage timeline is used. You can build animations that loop within their timeline, and place instances of those symbols on the stage timeline, where they can be animated along with the frame scrolling.
An example of a self-contained animation would be the balloon slowly floating up and down. Whether the frame is scrolling or not, the balloon plays through this simple loop giving the feeling of floating through the air (see Figure 8).
Animations nested inside symbols can provide a lot of depth to the composition. In this case, the subtle animation inside the balloon symbol, along with the INSPIRE letter-by-letter text animation, adds another level to the banner. The key factor is that these animations play when the banner loads, before the viewer scrolls through the full frame.
With just a few steps, you can set up a banner that uses scrolling and parallax effects. Use this approach to create engaging compositions that tell a story and describe a journey. If you're working through the tutorial, try to build some of the tasks suggested at the end of the tutorial using the concepts you learned along the way.
Check out the following resources for more information on Adobe Edge Animate CC:
Dan Carr is lead developer of Dan Carr Design in San Francisco. With 15 years' experience collaborating with Adobe and Macromedia, Dan has produced training materials, technical articles, and features available in Flash, Flex, and more. Dan's most recent work specializes in gaming and video for Flash, HTML5, and iOS.