Learn how to apply motion and opacity scroll effects for page elements in Adobe Muse.
As of November 2015, Edge Animate is no longer being actively developed. For more information, see Edge family of products | End of development.
The Scroll Effects panel contains four different tabs to control the motion, opacity, slideshow widgets, and Adobe Edge Animate content based on how a page is scrolled. When scroll effects are applied in conjunction with each other, and when some elements are also pinned, set to 100% width, and/or arranged above and behind each other using the Layers panel, you can create a wide variety of compelling effects.
The interface of Scroll Effects panel is similar to that of scroll effects panel for Browser Fill and Background Fill. Follow these steps to apply scroll effects to a page element using the Motion tab of the Scroll Effects panel:
In the example shown below, the key position is set to 500 pixels. When the browser begins scrolling, the element moves down and into position at a rate of 1 times, the same rate as the page scrolls. The element arrives in its position as the page scrolls to the key position. Once the page scrolls past the key position, the element moves to the right at 2 times the speed of the page scrolling.
In this section, you'll see how to apply transformations to the visibility that change the display of an element based on the visitor's scroll interactions. This is a helpful way to show and hide content by making items appear to fade in or fade out as the visitor scrolls down to a new section of the page.Follow these steps to apply scroll effects that affect the transparency of a page element using the Opacity tab of the Scroll Effects panel:
Enabling the Opacity option causes a different type of handle to appear on the element. Just like the T-handle used to set the key position in the Motion tab, you can click and drag the handle to appear above the element, drag it down so that it matches the top edge (or above any portion of the element), or drag it down below the element. The Opacity handle has three different parts that can be dragged independently to set the Key Position, Fade Position 1, and Fade Position 2 values.
If desired, the key position can be dragged alongside the fade position handles, to be set to the same value. Rather than dragging the handles, you can also enter numeric values for each of these fields in the Scroll Effects panel.
In this example, the element begins completely transparent and becomes more opaque, until it is completely opaque (the Opacity value corresponding to the Key Position is currently set to 100%) when the page reaches the key position. Once the page scrolls past the key position, the element becomes gradually more transparent again, to fade out of view once the page scrolls past 200 pixels.
Another common use for scroll motion is to combine scroll interaction with the display of images in a slideshow. You can add a Slideshow widget to the page and then use the Slideshow tab of the Scroll Effects panel to apply scroll effects, such as displaying a new image in the slideshow automatically, every time the page is scrolled to a specific location.
Click the Slideshow tab (third tab from the left) to review the settings for this section.
The common use for this part of the scroll motion interface is to pin a Slideshow widget to the page. Generally, the Slideshow widget will be configured (using the Options menu) to display only the larger slideshow container, while hiding the thumbnails as well as the Next and Previous buttons.
A Fullscreen slideshow is especially well suited to this effect, although the type of Slideshow widget you choose to add ultimately depends on the design of the site.
Follow these steps to apply scroll effects to a Slideshow widget:
Once you've added and configured the pinned slideshow, you can add scroll effects.
In the Slideshow tab of the Scroll Effects panel, enable the Slideshow checkbox while the Slideshow widget is selected.
Notice that as soon as the Slideshow option is enabled, the handle for the key position is added to the slideshow in Design view. If you want to update the key scroll position values, you can drag the left and right side of the handle or enter numbers in the Key Scroll Position field. You can also click the up and down arrows to s in the Scroll Effects panelincrease or decrease the numeric value.
The Slideshow tab of the Scroll Effects panel is interface contains two buttons: 1 and 2has two different ways you can control the playback of the slideshow images. You can set the slideshow to autoplay or you can set it up to incrementally advance through the images based on page scrolling.
The first way is to set the desired key position and then enable the Autoplay checkbox.
When the page is scrolled past the key position (or when the visitor clicks a link to an anchor tag and jumps down the page past the key position) the slideshow begins to play. The autoplay feature will continue displaying the images, looping through the set until the page scrolls back up above the key position or the visitor leaves the page.
In the example shown in the above image, the slideshow begins playing when the page scrolls to 100 pixels (or anywhere below that key position setting). If the visitor scrolls back up, the slideshow stops playing when the page scrolls above the key position (99 pixels or less).
The second way to control the Slideshow widget is to set the key position and then enable the Switch Slides Every radio button. In this workflow, you also set the number of pixels in the field below the radio button, to indicate how often the images in the slideshow will advance based on how far down the page is scrolled.
For example, you can pin a Slideshow widget to a longer page, so that it remains in a fixed location while the other page content scrolls. By setting a numeric value for Switch Slides Every option, you can set up the slideshow to switch to the next image in the set every time the page scrolls down to the specified number of pixels.
In the above image, the key position is set to 200. Once the page is scrolled past 200 pixels from the top, the next image in the series is displayed in the slideshow every time the page scrolls another 30 pixels.
Adobe Edge Animate is an intuitive design tool that enables you to create HTML5-based web animations. Using the interface in Edge Animate, you can build compositions using looping motion graphics and symbols. The animations you create using Adobe Edge Animate can be exported as OAM files and then placed into pages of your Muse sites. Animations created in Edge Animate play back in a browser without requiring a plug-in.
When you construct animations in Adobe Edge Animate, you drag elements onto the stage and manipulate their movements using a timeline. In addition to adding elements directly to the main timeline, you can also create nested elements with sub-elements that play back using their own internal timelines. To learn more about working with Adobe Edge Animate, see the Adobe Edge Animate product page. Also watch the Adobe Edge Animate video tutorials on Adobe TV.
To work with the Adobe Edge Animate scroll motion feature, the first step involves designing a composition specifically for this purpose. Scroll effects can be applied to OAM files to affect the animations that are placed on the main timeline. By strategically designing the animation so that only the items that you want to move when the page scrolls are on the main timeline (and placing everything else in the animation in nested symbol timelines) you can create interactive animations. As visitors scroll the page, the scroll effect settings only control the playback of animated elements on the main timeline.
For information on creating animations specifically for adding to an Adobe Muse site, see Adding Adobe Edge Animate Content.
Follow these steps to work with the Slideshow tab in the Scroll Effects panel:
In the above image, the key position is set to 50 pixels. You can drag the T-handle or enter a different value in the Key Position field to adjust it.
After setting the key position, you can control playback of the animation using two options:
Any animated objects that are nested or linked from the main timeline in the Adobe Edge Animate composition aren't affected by the scroll motion effect settings. Therefore, you can choose to either have a static background or continually looping nested elements that are consistently moving, regardless of visitor interaction to scroll the page.