One way to make your Adobe Muse CC websites more lively is to create animated effects that are triggered by page scrolling. (If you're new to Adobe Muse, check out more articles on the topic.) But there's no need to stop there: You can also enable site visitors to control the playback of an Adobe Edge Animate CC composition as they scroll. Edge Animate is a motion and interaction tool for creating animated, interactive content.
As a visitor scrolls through the web page, animations on the main timeline of the Edge Animate file can move forward and backward, while other animated elements do their own thing.
In this article, I provide Edge Animate CC and Adobe Muse CC sample files and show you how to use the Adobe Muse Scroll Effects panel to control animated effects. For a sneak peek of what you'll create, check out the live example of this sample project and scroll down the page to animate the cat and bird as a flock of birds fly overhead (see Figure 1).
Begin by downloading the sample files. Save the ZIP file to your desktop and then double-click the ZIP file to expand the sample files folder, named Edge-Animate-Scroll-Effects. It contains all you need to follow along with these instructions. If you don't already have Adobe Edge Animate CC and Adobe Muse CC installed, download the 30-day trial software.
In this section, you'll explore the Edge Animate sample project and identify the difference between animated elements added to the main timeline and animations that are within symbols on the stage. Follow these steps:
Site visitors can't tell the difference between animated elements on the main timeline or within symbols. However, it's an important distinction for you. When you place the published composition on a page of an Adobe Muse site, only the timeline animations are affected by the scroll effect settings that you apply.
In a real-world project, you copy the exported OAM file to the Adobe Muse site folder that contains the site's assets. For this example, the sample files folder also serves as the Adobe Muse site folder. If you prefer not to follow these steps, use the exported OAM file in the Final folder.
You can place published OAM files in Adobe Muse the same way you place image files into a page design:
Next you'll apply scroll effects to the placed Edge Animate content. For this example, you'll add settings to control the playback of frames in the main timeline animation based on the key position value (the vertical area on the page when scroll effects begin).
Notice that enabling scroll effects causes a T-handle to appear above the Edge Animate content. This handle is only shown in Design view and won't appear on the live site. The top edge of the handle can be dragged to set the key position for the scroll effect. When the visitor scrolls down the page vertically and passes the key position in a browser window, the scroll effect settings are active.
You can extend the strategies in this article in many different ways. For example, instead of setting the number of pixels that cause the frames to switch, you can simply set the OAM file to Autoplay once the visitor scrolls past the specified key position. You can also apply opacity scroll effects to control the transparency of the placed OAM file, or you can make the OAM file move into position on the page using motion scroll effect settings.
Experiment by creatively constructing Edge Animate content and then applying multiple scroll effects that use different key positions. See how the animation is affected by setting different Switch Frame values. Organize Edge Animate projects to take advantage of Edge Animate scroll effects in Adobe Muse by putting the animation elements you want to affect on the main timeline.
To learn more about working with Edge Animate CC, read the Inspire article Creating interactive illustrations with Adobe Edge Animate CC and follow along with these Edge Animate CC tutorials. For more on applying scroll effects in Adobe Muse, read Exploring parallax scrolling, animation, and text effects in Adobe Edge Animate CC.
Group Product Manager Dani Beaumont has been managing innovative applications in the web and design space for more than 20 years. Before working on the Muse team, Dani was integral in the acquisition and integration of Business Catalyst into the Adobe web solutions portfolio. She's also served as the Product Manager for Adobe Fireworks for two releases and Macromedia Director before the Adobe acquisition.