Apply scroll effects in Adobe Muse websites

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.

Applying motion scroll effects using the Scroll Effects panel

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:

1. In Muse, switch to the Design view and select Page > Page Properties. 
2. Set the Minimum Height value to a minimum of 2000 pixels, to ensure that the page is long enough to scroll. 
3. Click OK to save the changes and close the Page Properties dialog box.
4. In Design view, draw a rectangle or a text frame on the page.
5. Use the Fill tab of the Fill menu to add a tiling or non-tiling background image. Or just select a solid or gradient fill color.
6. Choose Window > Scroll Effects to open the Scroll Effects panel.
   

7. Enabling Scroll Effects: On the Scroll Effects Panel, the Motion tab (far left side) is displayed. While the element on the page is selected, enable the Motion checkbox.
   
   TIP: Notice that enabling the Motion checkbox adds a T-shaped handle to the element that extends off the top edge. The T-Handle indicates the key position applied of the Scroll Effect applied to the element. The Scroll Effect begins to take effect when a visitor reaches the Key Position while scrolling.
   
   The T-handle control appears above the element, by default. However, you can click-drag the handle to extend it up higher, drag it down to align with the top edge of the element you are controlling, or drag the handle downwards below the element.
   
   
8. Positioning the T-Handle to set the Key Position: Drag the T-handle to set the key position. This allows you to set up the movement that will occur before and after the scrolled page meets the top of the T-handle.
   
   Alternatively, you can enter a numeric value in the Key Position field in the middle of the Scroll Effects panel while the Motion tab is active. In the above image, the key position is set to 200 pixels. 
   
   The location of the T-shaped handle represents the element's key position. When the page is scrolled vertically, the settings in the Initial Motion section are applied so that the element's position matches its location as shown in Design view.
   
   Once the visitor scrolls the page or clicks an anchor link to jump past the element's key position, the settings in the Final Motion section are applied.
   
   The Initial Motion section contains a set of vertical and horizontal direction arrows and speed options.
   
   
9. Setting up vertical direction of Initial Motion: Choose a vertical direction (up or down) by clicking one of the vertical buttons. Enter a speed value in the field next to the vertical direction arrows to set the speed at which the movement will occur relative to the page scrolling speed. If you enter 0, the element will not move vertically. You can also enter a percentage by using a decimal point. For example, if you enter .5, the element moves vertically at half the rate, compared to the rate the page is scrolling.
   
   
10. Setting up horizontal direction of Initial Motion: Set the horizontal direction of scrolling the element (left or right) by clicking the left or right arrow to set the direction that the element will move before it reaches the key position. In the field to the right of the horizontal arrows, set the speed value for the horizontal direction. If you do not want the element to move in a horizontal direction, set the initial horizontal speed field to 0.
    
    
11. Repeat steps 7 and 8 to set the direction and rates of motion for the Final Motion section.

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.

12. Press Preview or choose File > Preview Page in Browser to test the scroll effects. Scroll the page down and back up again to see the element move.
13. Return to Muse or click the Design button when you are finished testing, to continue editing the page.

Applying opacity scroll effects using the Scroll Effects panel

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:

1. While editing a page in Design view, verify that the Page Properties has a pixel value in the Minimum Height field that is taller than the average height of most monitors, such as 2000 pixels. Alternatively, you can add page content to the page to ensure it is long enough to scroll.
2. In Design view, draw a rectangle or a text frame on the page.
3. Use the Fill tab of the Fill menu (or use the Fill panel) to add a tiling or non-tiling background image to the selected page element, or set a solid or gradient fill color. (Or if you prefer, add a Slideshow widget or place an Adobe Edge Animate OAM file on the page).
4. While the element is selected, click the Opacity tab (second tab from the left) in the Scroll Effects panel and then enable the Opacity checkbox.
   

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.

5. Click and drag the middle square part of the handle to set the key position. In the example below, the key position is set to 150 pixels.

6. Click and drag the top circular part of the handle to position it in the desired location. In the example below, the Fade Position 1 is set to 100 pixels.
   

7. Click and drag the bottom circular part of the handle to position it in the desired location. In the example below, the Fade Position 2 is set to 200 pixels.

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.

8. Press Preview or choose File > Preview Page in Browser to test the scroll effects. Scroll the page down and back up again to see the element's opacity change in relation to the page scrolling.
9. Return to Muse or click the Design button when you are finished testing to continue editing the page.
   

Working with the Slideshow tab of the Scroll Effects panel

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:

1. Update the Min Height field in the Page Properties dialog box to make the page tall enough to scroll. Alternatively, add content to create a longer page.
2. Drag a Slideshow widget from the Widgets Library to the page. Use the Options menu to configure the slideshow options. (When applying scroll effects to Slideshow widgets, the Next, Previous, and Thumbnails options are usually disabled).
3. Add images to the Slideshow widget by clicking the folder next to the Images section in the Options menu. Browse to select the images you want to add from your computer to populate the image gallery.
4. Use the Pin interface in the Control panel to pin the slideshow to its current position in the browser window. While the slideshow is selected, click one of the six pin positions.
   

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.

Working with the Adobe Edge Animate tab of the Scroll Effects panel

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:

1. Export the OAM file from Adobe Edge Animate and save it to your site folder.
2. Launch Muse and double-click a page to open it in Design view. Verify that the page is long enough to scroll by updating the minimum height settings in the Page Properties dialog box or adding page content to create a longer page.
3. Choose File > Place and browse to select the OAM file from the site folder.
4. Open the Scroll Effects panel. Click the Adobe Edge Animate tab (fourth tab from the left) to review the settings for this section.
5. While the OAM file is selected, enable the Edge Animate checkbox.

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:

• Autoplay: When this option is selected, the animation in the main timeline begins playing as soon as the browser is scrolled to the key position, regardless of the number of frames in the main timeline. The animation continues to play until the page is scrolled above the key position.
• Switch Frames Every: When this option is selected, the main timeline animation will advance 1 frame every time the page is scrolled past a specific number of pixels. For example, if you create a page that is 3000 pixels high and enter the number 10, the main timeline animation will play back at a rate of 1 frame every 10 pixels that the page is scrolled. If the visitor scrolls down the page faster, the animation rate increases.
  

6. After choosing the settings in the Edge Animate tab of the Scroll Effects panel, choose File > Preview Page in Browser (or click the Preview button). Test the page by scrolling up and down to see the Edge Animate animation content (that was added to the main timeline) play back.
7. If you need to make any changes, return to Muse (or click the Design button) and update the settings in the Scroll Effects panel.