How to use scroll effects in Adobe Muse

In this section, you'll take a look at a few of the many ways you can use scroll effects to add interactive features, unique site navigation, and expressive motion graphics to your Muse sites.

To get started, follow the steps below:

1. Visit the live sample site and click on each section to see examples of each goal. Scroll down each example page to see how scroll effects control the way page elements display.
2. Scroll to the end of the live sample site to download the .muse file.
3. Open the sample site and review the project in the Muse workspace.
4. Open the Layers panel and expand the section labeled Content to see the elements used to create each example.

The piece-by-piece effect

This effect causes a set of individual elements to fly in and re-assemble into the page design as the visitor scrolls down the page. Graphics and text frames are controlled using scroll effects that create interactive compilation, as though pieces of a puzzle join together. This is an intriguing way to show off product details on a web page.

The workflow for this example uses the Initial Motion section of the Motion tab of the Scroll Effects panel to make elements come together into a consolidated design. After each piece moves into its place, the Final Motion settings are set to 0 to keep the existing elements from moving as new elements fly in.

Follow these steps to create a similar piece-by-piece effect:

1. In Design view, choose Page > Page Properties. Set the Min Height field to a much larger value. In the site example, the minimum height of the page is set to 14,120 pixels.
2. Use the Text tool to create a text frame and enter the desired text content.
3. Open the Motion tab of the Scroll Effects panel and enable the Motion checkbox. In this example, the Initial Motion section settings cause the text frame to move down and into position at .25 times (a rate that is one fourth) the speed of scrolling. As the page reaches the key position for the text frame, the text frame reaches the place it is located in Design view. Then, the Final Motion settings (0 values for both directions) cause the first element to remain in place, as though the element is pinned.
4. A PNG file with transparency (a mobile phone outline) is positioned below the text frame. This element uses the settings in the Motion tab of the Scroll Effects panel to fly in from the left side of the page, move into position, and then stay there.
5. Close behind the phone outline, a smaller white element follows a similar movement pattern, flying in from the left side of the page and then staying in position. The white graphic simulates the earpiece at the top of a mobile phone. This asset (named phone-earpiece.png) is arranged above the mobile phone outline in the Layers panel, so it displays above the phone outline in the design. 
6. Directly behind the earpiece, a small white element that simulates the phone's Home button flies in from the right, mimicking the behavior of the earpiece and also displaying above the mobile phone outline in the design.
7. Next, a light colored rectangular graphic with a subtle gradient that flows vertically from white to light gray uses the Motion tab of the scroll Effects panel to move into position, so that it fits perfectly inside the transparent center area of the mobile phone outline. Once in position, it stays in place, giving the appearance of the phone's screen. The screen element (phone-screen.png) is layered at the bottom of the Layers panel, so it is arranged to appear behind all of the other elements in the page design.
8. A set of four rectangles (filled with solid blue, green, yellow, and red colors) moves into position next. To create the scattered effect that flies together, each of the rectangles is set to different directions and speeds in the Motion tab of the Scroll Effects panel. The blue rectangle moves down and to the right, the green and yellow rectangles move up and to the right, and the red rectangle moves up and to the left in the Initial Motion sections. In the Final Motion section, all of the rectangles have a setting of 0 for both directions — causing each element to behave as though it is pinned in place once it arrives at its final destination on top of the mobile phone screen.
9. After all the other pieces have been assembled, a second text field moves up to reside below the first text field, moving at a rate that is .5 times (half) the speed the page scrolls.

And finally, there are two remaining elements at the bottom: A solid rectangle that is filled with the same solid color as the page (rendering it invisible in the design) and a group of objects (a yellow rectangle with a light bulb graphic) behind it.

The solid colored rectangle is there to hide the group, which is arranged behind it.

10. The rectangle is essentially pinned in place and never moves, because all of the values in both the Initial Motion and Final Motion fields are set to 0. As the page scrolls to the key position of the group containing the light bulb graphic, it moves to the left, becoming visible as it is no longer hidden by the rectangle above it. The light bulb group is layered above the mobile phone's screen element but below the mobile phone outline, so the light bulb graphic appears to wipe into place (similar to a real world phone transition that occurs when swiping horizontally). The light bulb group covers the gradient rectangle that was previously representing the phone's screen.

As you can see from this simple example, you can use a combination of a very tall page, a series of elements that are layered strategically in the Layers panel, and the Motion tab of the Scroll Effects panel to create the illusion of pieces coming together in an animation as the page scrolls down.

Sliding menu

The sliding menu effect uses many of the same conventions described in the piece-by-piece effect. The elements appear to fly in using the Motion tab of the Scroll Effects panel, and rectangles hide some of the elements until they are ready to be revealed in the page design.

This example uses strategically positioned groups of rectangles to create the appearance of a complex angled design.

View the sample site in a browser to watch the airplane fly horizontally across the page from right to the left, followed by a set of stylized menu options and a gradient background with diagonal stripes.

Follow these steps to create a similar sliding effect:

1. In Design view, choose Page > Page Properties. Set the Min Height field to a much larger value. In the site example, the minimum height of the page is set to 4,665 pixels.
2. The airplane image is layered above all other content on the page, so it appears at the top of the list in the Layers panel. It is set to move left both before and after its key position in the Motion tab of the Scroll Effects panel.
   

3. Four text frames are configured to fly in to the left and stack vertically to create the navigation menu. In the Motion tab of the Scroll Effects panel, each text frame has the same speed (1.25 times the rate of scrolling) in the Initial Motion section. Each text frame also has a different key position. As the page scrolls down, each text frame slides into position, coming into alignment on the left side of the design. All of the text frames have 0,0 values in the Final Motion section, causing the menu items to stay in position once they are in position.
4. The text frames are filled with a solid background color, although at first glance they appear to be images because they display diagonal cut sides, rather than straight vertical edges. This effect is achieved by layering a group of three rectangles above the text frames, which are filled using the same solid color as the browser fill color.

5. The text frame animation is initially hidden by another group of rectangles, because the text frames are arranged below the group in the Layers panel. The group is a combination of three rectangles: A larger rectangle with a vertical gradient and two other smaller rectangles (one square and one rotated) that are filled with a solid color that matches the top color of the gradient.

6. If you scroll down to review the bottom of the group, you'll see a series of four more rectangles with varying widths that are rotated and aligned above the bottom right corner of the larger gradient rectangle.
   

Groups are great for combining a set of elements and controlling them as a single item. In this example, groups of different rectangles have motion scroll effects applied to make the group move as a single entity.

This example also illustrates creative use of negative space. If the browser fill has a solid background color applied, you can make a lot of interesting cut out effects by layering rectangles filled with the same color above other rectangles. Rather than designing graphics in an image-editing program and placing a single image, you can use rectangles to construct graphics from within the Muse workspace.

Fade It

This example of an animated sunrise and sunset is achieved using a combination of two scroll effects: motion and opacity. This example displays a gradient color fill page background with a single placed PNG image of the sun. The PNG image includes transparent areas that allow the background page fill color to show through.

Review the example site in a browser to see how the sun fades up from 100% transparency to move across the page. At its peak, it is fully opaque, but as you continue scrolling down the page, the sun sets and becomes incrementally more transparent again until it fades out.
Follow these steps to create a similar fading effect:

1. In Design view, choose Page > Page Properties. Set the Min Height field to a larger value than the average monitor can display, so that the page can scroll. In the site example, the minimum height of the page is set to 2,988 pixels.
2. The sun image is placed in the center of the page. In the Motion tab of the Scroll Effects panel, the key position is set to 1410 pixels. Also notice the settings for the Initial Motion and Final Motion sections.

These settings cause the sun to move in a semi-circular path, arcing from the lower left side of the page, up to the center (as the key position is reached) and then back down to the lower right side of the page.

3. While the sun is still selected, click the Opacity tab to see its settings. Fade Position 1 is set to 726 pixels (above the sun). Fade Position 2 is set to 1925 pixels (below the sun). The sun begins with 0% opacity (completely transparent), and then becomes completely opaque as the page scrolls to its key position. As the page scrolls down past the sun's key position, the opacity moves from 100% to 0% opaque, to create the effect of a fade in and fade out.
   

4. Test the page by choosing File > Preview Page in Browser. Scroll the page to see the sun appear to rise up while fading in, and then move downward to the right while fading out.
5. Close the browser and return to the Muse workspace.

Edge Animate

This example illustrates how to control OAM files exported from Adobe Edge Animate using scroll effects. In this sample, the page is filled with a vertical gradient that begins with a light turquoise color and transitions to a dark blue.

A combination of settings applied in the Motion and Edge Animate tabs create this animated effect.

Three instances of the same OAM file are placed side by side horizontally, to create a row of animated compasses. When you view the sample site in a browser, all three compasses move up into view and then stay in position. Each of the three compasses appears to spin at different rates, but it is the settings in the Scroll Effects panel, not the construction of the Edge Animation file, which cause them to revolve at different speeds.

Follow these steps to create a similar effect with three placed OAM files:

1. In Design view, choose Page > Page Properties. Set the Min Height field to a much larger value. In the site example, the minimum height of the page is set to 7465 pixels.
2. Select all three instances of the compass on the page. In the Motion tab of the Scroll Effects panel, you can see that all three OAM files have the same key position and motion settings, because all of the values are displayed.

If you preview the sample in a browser, you'll see all three OAM elements jump up in unison and then stay in a row as though they are pinned.

3. Click away from the compasses to deselect all three, and then select just the compass on the left. Press and hold the Shift key while selecting the compass on the right, so that both are selected. Open the Edge Animate tab of the Scroll Effects panel to review the settings.

The two side compasses are both configured to loop through the timeline animation and advance to the next frame every time the page scrolls down 350 pixels.

4. Deselect the two outer compasses. Select the center compass and look in the Edge Animate tab again to see that the Switch Frames Every field is set to 400 pixels. This setting causes the center animation to move slower compared to the two outer compasses.

You can create interesting animation effects by varying the speed of several placed Edge Animate animations, in relation to the speed of the page scroll. For example, you can create a school of fish, a sky filled with moving clouds, or other effects by adding multiple iterations of the same OAM file with different scroll effect settings applied.

Slideshow effect

You can control how the set of images in a Slideshow widget are displayed in relation to how the page is scrolled. This involves adding a Slideshow widget to a page and then using the Slideshow tab of the Scroll Effects panel to update the slideshow options.

In this example, the slideshow is populated with a series of images that create a 360-degree rotating view of a backpack. You can take similar slideshow images by setting up a tripod and taking photos of an object that is placed on a rotating stand. This effect is useful for displaying an interactive product description, to help potential customers see an item from all angles before purchasing it.

Follow these steps to create a similar effect using a Slideshow widget:

1. In Design view, choose Page > Page Properties. Set the Min Height field to a much larger value. In the site example, the minimum height of the page is set to 7,465 pixels.
2. A text frame with the words Superpack is set up to use scroll effects. In the Motion tab, configure the Initial Motion settings to move the text in from left to right, moving at the same rate as the page is scrolled. In the Final motion settings, both directions are set to 0, so the text frame remains in location as though it was pinned on the page.
    

3. Open the Widgets Library and drag a Slideshow widget to the center of the page, to the right of the text frame's final destination.
4. Use the Add Images option in the Options menu to populate the slideshow with image files. 

While the Slideshow is selected, you can select the Slideshow widget and use the Pin interface in the Control panel to pin the Slideshow in place. You can also experiment by adding a Fullscreen Slideshow widget and controlling it with scroll effects. 

5. While the slideshow is selected, open the Slideshow tab of the Scroll Effects panel and enable the Slideshow checkbox.
6. Either drag the T-handle or enter a value in the field to set the key position. In this example, the key position is set at 1066 pixels.
7. Enable the Switch Slides Every radio button and set the field below it to 50 pixels.
   

8. Test the page in Preview or in a browser. Scroll down the page to see the backpack appear to rotate. You can also create images that appear to fly upwards or fall downwards, by populating the slideshow with a series of similar but slightly different image files, similar to frames in an animated GIF.
9. After testing the scroll effects, return to Design view in Muse to continue editing the pages.
   

The roll-up

Using scroll effects, you can create a very long page that is broken into sections with radically different appearances. As the visitor scrolls down a page, they transition between page sections that appear to roll up, with animated text effects and separating borders created using a shadow effect.

You can use anchor tags or just add a note to encourage visitors to scroll down the page to see each of the sections. When you are at the bottom of the example site and you click the Back to Top button, you'll see the entire page zip by as the anchor link returns to the top of the page design.

Follow these steps to create a similar roll-up effect:

1. In Design view, choose Page > Page Properties. Set the Min Height field to a much larger value. In the site example, the minimum height of the page is set to 16,990 pixels.
2. In the Browser Fill menu, set the browser fill color to a solid blue.

3. While the entire page is selected, use the Fill menu to set the page color to none, so the blue browser fill color shows through.
4. Scroll down the page to approximately 2248 pixels from the top. Use the Rectangle tool to draw a rectangle that is 3000 pixels wide by 2000 pixels high. Use the Selection tool to center the rectangle on the page, with both sides extending out wider past the sides of the browser window.
5. While the rectangle is still selected, use the Fill menu to set a solid green fill color. Use the Effects menu to set a shadow effect.

6. While the green rectangle is selected, enable the Motion checkbox in the Motion tab of the Scroll Effects panel. Click-drag the T-handle and collapse it to that the key position is set at the top edge of the rectangle, which is 2248 pixels in the example site.

7. In the Initial Motion section, set the rectangle to move down at a rate of 1.5 times the rate of scrolling. Set all other directions to 0.
8. Use the Text tool to create a text field near the top of the green rectangle. In this example, the text field says: This is the roll-up. However, you can enter the text content and apply the text formatting you prefer.
9. While the text frame is selected, enable the Motion tab of the Scroll Effects panel. Drag the T-handle to align it with the top edge of the green rectangle and update the settings to control how the text frame will display based on the page scrolling.

10. Set the Initial Motion down direction to move at 1.5 times the rate of scrolling. Set all other values in the panel to 0. This causes the text field to move down, moving along in the same direction and speed as the green rectangle. Both the rectangle and the text frame stay in place once the page scrolls past their key positions.
11. If you click Preview, you can scroll down and see how the green rectangle and text field roll down from the top and into view. Click Design when you are finished testing to continue editing the page.
12. Use the View menu to zoom out to 10% of the site design. Select the green rectangle and the text field. Press and hold the Option/Alt key while dragging the two elements down further on the page, to duplicate them. Set the fill color of the duplicated rectangle to dark blue and use the text tool to update the text content.

In this example, the duplicated text frame has the text: Use it to drastically alter the appearance of your website. However, you can enter any text you prefer to indentify the dark blue section of the page.

13. Using the Selection tool, position the duplicated rectangle and text frame to approximately 5,448 pixels down from the top of the page.
14. While the dark blue rectangle is selected, check the Motion tab of the Scroll Effects panel. The key position has automatically been updated to the rectangle's new location (5,448px) and the downward direction in the Initial Motion section is still set to move at a rate of 1.5 times the rate of scroll (and all other values are set to 0). If you check the duplicated text frame, you'll see that the scroll effects are also preserved for the duplicated element.
15. Repeat steps 12 and 13 four more times, to create a total of six different large rectangles with text frames above them. Each rectangle has the shadow effect and the scroll effect settings already applied. Position the last four rectangles at the following key positions: 8,648 pixels, 11,852 pixels, 15,058 pixels, and 18,251 pixels, so that each section is separated by approximately 1,200 pixels.
16. Use the Fill menu to set the fill color of the rectangles to apply different colors. Experiment by applying both solid and gradient color fills to make each section of the page stand out and contrast the other sections.
17. Use the Text tool to update the text content for each section. For example, you could change each to reflect the background color of the rectangle below it, like this: This is the blue section.
18. Test the page by choosing File > Preview Page in Browser. Scroll the page to see the different page sections appear and then be replaced by the next page section.
19. Close the browser and return to the Muse workspace.
    

Dynamic type

You can create unusual typographical designs using a combination of motion scroll effects and Adobe Edge Web Fonts. Web fonts let you style text using a wide range of fonts that are loaded when the page loads. Rather than placing and animating images of text created in an image-editing program, you can create pages that look great and are easier to update using Edge Web Fonts. And the scroll effects create a dramatic sense of animation as the page scrolls down.

Follow these steps to create a similar effect with dynamic text:

1. In Design view, choose Page > Page Properties. Set the Min Height field to a much larger value. In the site example, the minimum height of the page is set to 4,854 pixels.
2. Set the fill color for the page to none. The browser fill color doesn't matter, because the page will be covered by a long rectangle in the next step.
3. Use the Rectangle tool to draw a large rectangle that is approximately 1,159 pixels wide by 4,854 pixels high. Use the Fill menu to fill the rectangle with a solid or gradient fill color. In this example, a teal to fuchsia gradient color is applied as the fill. Use the Selection tool to center the rectangle so that it fills the entire browser area. If desired, you can zoom out to ensure that the rectangle is centered on the page.

4. After you center the rectangle, set the magnification in the View menu back to 100%.
5. On the left side of the page, use the Text tool to create a series of text frames. In this example, there are a total of five text frames. The content of each text frame is listed below, but feel free to enter the text of your choice in each text frame:
   • Five Frames
   • Scrolling
   • At Different Speeds Will
   • Create
   • Dynamic Tension

As an optional extra step, you can duplicate some of the text frames and then apply slightly different styling. In this example, the text frame with the word Create has been duplicated and then the two iterations are layered on top of each other, to create a light blue drop shadow effect.

6. Use the Text tool to select each of the text frames. Use the Text panel (or the text formatting options in the Control panel) to apply different web fonts, font sizes, colors, and other typography settings to make each text frame stand out.
7. Select all of the text frames. While they are selected, open the Motion tab of the Scroll Effects panel. Enter the same numeric value to set the key position for all selected text frames at once. (In this example, the key position is set to 1372 pixels). Also set the horizontal direction for both the Initial Motion and the Final Motion sections to right. Set all of the vertical directions for the Initial Motion and Final Motion sections to 0 so the text frames won't move vertically.
8. Click away from the text frames, and then click each text frame individually. Enter slightly different values for each of the text frames. In the list below, the first value is the Initial Motion speed and the second value is the Final Motion speed for the horizontal (right) direction:
   • Five Frames: .9x, .1x
   • Scrolling: .12x, .5x
   • At Different Speeds Will: .7x, .17x
   • Create: 1.1x, .005x
   • Dynamic Tension.: 1x, .01x
     

9. Use the Text tool to create a text field and type the number 5 on the right side of the page. Again, you can choose to duplicate the text frame and then apply different colors and text formatting to give the illusion of beveled edges and drop shadows. If you create duplicates of a text frame for design purposes, group the text frames together so that you can apply scroll effects to the group.
10. While the text field with the number 5 is selected, enable the Motion checkbox in the Motion tab of the Scroll Effects panel. Set the key position numerically or by dragging the T-handle (in this example, it is 1425px). In the Initial Motion section, set the element to move to the left at 1 times the rate of scroll. In the Final Motion section, set the element to move left at .01x the rate of scroll.
11. Test the page by choosing File > Preview Page in Browser. Scroll the page to see the five text frames move into the page from the left side as the text frame with the number 5 moves in from the right side. Scroll up and down to see the text frames animate.
12. Close the browser and return to the Muse workspace.
     

Stacked menu

You can create engaging interactive site navigation using scroll effects, so that the different buttons fly into the visible area on the page and then align themselves to create a menu bar. In this example, four rollover buttons move up from the bottom of the page as it is scrolled, and lock into position to display a vertical menu bar.

Once the four buttons are aligned, background content (in the form of a light bulb graphic, colored background area, text frame, and diagonal corner stripes) fly in from both sides of the page to create a section of the site.

Although the buttons are not linked in this example, you can add links if desired using the Hyperlink drop-down menu so that visitors can click on them to either load a new page or use anchor tags to jump to a different location on the current page.

Follow these steps to create a similar stacked menu effect:

1. In Design view, choose Page > Page Properties. Set the Min Height field to a much larger value. In the site example, the minimum height of the page is set to 7465 pixels.
2. Set the page fill color to none and set the browser fill to a solid fill color. In the example site, the browser fill is set to a light tan color.
3. Use the Text tool to create a new text frame. Type the word Home. Use the formatting options in the Control panel to add a background color to the text frame. Also update the formatting options to style the text as desired. Use the handles on the sides of the button to expand its width and height to approximately 300 pixels wide by 115 pixels tall.

4. Open the States panel. Select the Rollover state and add a different fill color (or style it as desired) to make a rollover button.

5. After updating the Rollover state, select the Normal state again.
6. Open the Motion tab of the Scroll Effects panel. While the button is selected, enable the Motion checkbox. Set the key position by dragging the T-handle or entering a numeric value. Also set the Initial Motion section to move up at a rate of .75 times the rate of scroll. Leave all other fields set to 0.

7. Press and hold the Option/Alt key while dragging the Home button further down the page. This creates a duplicate of the button. Make sure that the duplicate is aligned vertically with the original Home button. When the two elements are aligned and the duplicate is still selected, a dark blue smart guide temporarily displays in the center.

8. Move the duplicate button down the page, to about 460 pixels below the original button.
9. Repeat steps 7 and 8 to duplicate the button two more times, to create a total of four buttons that are evenly spaced on the page. Use the Text tool to edit the second, third, and fourth button from the top, to update the text content using these labels: Products, Photos, Contact Us.

When you duplicated the first Home button, you copied the styling of the text frame and its content, as well as the scroll effects settings. If you select one of the duplicated buttons and look in the Scroll Effects panel, you'll see that the settings in the Motion tab match the settings applied to the Home button, and the key position for each button is 460 pixels below the previous button (the same distance as the space between each button on the page).

10. Calculate the total height of the four buttons when they are aligned in their final locations by adding up the height and spacing. In the example site, the buttons are each 116 pixels high and there are 4 pixels of space between each button. That means that the total height of the vertical menu bar (when assembled) is 476 pixels. Use the Rectangle tool to draw a rectangle that is the desired width of the page section and the same height as the menu bar. In this example, the rectangle is 931 pixels wide by 476 pixels high.
11. If you'd like to replicate the design in the example site, you can set the fill color of the rectangle to a pale pink, in a lighter shade than the Normal state of the buttons. You can also create rounded corners if desired by entering a corner radius value in the Control panel. In this example, all four corners are set to 10 pixels.

12. Use the Selection tool to align the rectangle so that its top edge is approximately 5094 pixels from the top of the page. Also make sure that the left side of the rectangle is vertically aligned with the left side of the buttons. In the example site, the rectangle and the buttons are all 14 pixels from the left side of the page. You can see these settings when you select an element and open the Transform panel. The X value is the distance from the left side (14 pixels) and the Y value is the distance from the top of the page (5094 pixels).
13. While the rectangle is still selected, open the Scroll Effects panel and enable the Motion checkbox in the Motion tab. Set the key position to 4979.
14. Set the Initial Motion to move right at a rate of 1 times the speed of scroll. Leave all other fields in the motion tab set to 0.

15. To ensure that the rectangle is arranged behind the four buttons, choose Object > Send to Back while the rectangle is selected.
16. Choose File > Place and browse to select an image file and then click once on the page to place it. In this example, a PNG with transparency is placed to display a light bulb image. The light bulb is positioned on top of the large rectangle, over on the right side away from the area that will be covered by the menu buttons. In this example, the image is positioned 501 pixels from the left (X position) and 5245 pixels from the top of the page (Y position).
17. To ensure that the placed image is arranged behind the four buttons, choose Object > Send to Back while the image is selected. The goal is to display the placed image above the large rectangle but behind the four buttons.
18. While the placed image is selected, open the Motion tab of the Scroll Effects panel and enable the Motion checkbox. Set the key position to the desired value. In the example site, it is set to 4979 pixels.
19. In the Initial Motion section, set the right value to move at a rate of .75 times the rate of scrolling. Set all other direction values to 0.

20. Use the Text tool to create a text frame. In the example file, the text frame has the following content: Stack linked text frames with high contrast roll-overs to create unusual menus. However, you can enter any text content you prefer. Use the formatting options in the Control panel to style the text as desired. In this example, the text frame does not have a background fill color applied.
21. Use the Selection tool to position the text frame to the right of the placed image. In this example, the text frame is set to an X value of 357 pixels (from the left) and a Y value of 5136 pixels (from the top). The actual location depends on the text content and the formatting options you apply to the text frame.
22. While the text frame is selected, either use the Object > Send Backwards option to arrange it or move it in the Layers panel so that the text frame displays behind the four buttons but above the large rectangle.
23. Enable the Motion checkbox in the Scroll Effects panel. Set the key position by dragging the T-handle or entering a value. In the example site, the key position is set to 4979 pixels, the same key position value used by the placed image (light bulb graphic).
24. In the Initial Motion section, set the text frame to move in the left direction at a rate of half (.5) times the rate of scrolling. Set all other fields to 0.

The basic stacked menu section is now complete. However, there's one more design element you can add. This involves adding several rotated rectangles above the bottom right corner of the large rectangle, the same way the Sliding Menu example used rotated rectangles to add a diagonal stripe effect.

25. Use the Rectangle tool to draw several rectangles of varying widths. Fill the rectangles with the same color as the background color applied to the browser fill. That way, the rectangles will not be visible until the large rectangle moves to the right into place behind them. If desired, you can group the set of diagonal rectangles to work with them as a single element.

26. If needed, use the Layers panel or choose Object > Send to Back to arrange the larger rectangle to appear at the back, behind all of the other elements on the page.
27. Be sure to test your progress periodically by clicking Preview or previewing the page in a browser and scrolling down to see the stacked menu move into place. Return to Muse when you are finished testing. 

Motion Background

To create a motion background effect, you can create a series of large rectangles filled with tiled background images that cover the length of a long page. This example uses the Scroll tab of the Fill menu (rather than the Motion tab of the Scroll Effects panel) to apply the motion settings.

Follow these steps to create a similar motion background effect:

1. In Design view, choose Page > Page Properties. Set the Min Height field to a much larger value. In the site example, the minimum height of the page is set to 6254 pixels.

2. At the top of the page, use the Rectangle tool to draw a large rectangle. In the example site, the rectangle is 1159 pixels wide by 1312 pixels high. Use the Selection tool to center the rectangle on the page, with both sides extending out wider past the sides of the browser window.
3. While the rectangle is still selected, use the Fill menu to set a background image. Set the Fitting menu to Tile to tile the image.

4. If desired, you can use the Effects menu to set a shadow effect, to create a dramatic border surrounding the rectangle.
5. While the filled rectangle is selected, open the Scroll tab of the Fill menu. Enable the Motion checkbox and then click-drag the T-handle or enter a number in the field to set the key position. In the example site, the key position is set to 512 pixels. However, you can collapse the handle to align it with the top edge of the rectangle if desired.
6. In the Initial Motion section, set the direction to move down and to the left and set both speeds to move at a rate of .2 times the speed of scrolling. Repeat the same settings in the Final Motion section. 

7. Repeat steps 2 - 6 to create another filled rectangle. Position the new rectangle directly below the first rectangle you made, so that none of the browser fill area shows through and there isn't any space between the two rectangles. Fill the new rectangle with a different tiled image background fill.
8. Repeat step 7 to create a third large rectangle that is positioned immediately below the second rectangle. Use the Fill menu to set a different tiled background image. You might find it helpful to zoom out using the View menu to see all of the rectangles and align them vertically on the page.

9. While the second rectangle is selected, open the Scroll tab of the Fill menu. Update the Initial Motion section to move the rectangle to the right at a rate of .3 times the rate of scrolling. In the Final Motion section, apply the same settings to move the rectangle to the right at a rate of .3 times the rate of scroll. Leave both vertical direction fields set to 0.

10. Select the third rectangle and update the settings in the Scroll tab of the Fill menu. Set the Initial Motion section to move upwards at a rate of .25 times the rate of scrolling and move to the left at .6 times the rate of scroll. Apply the same settings in the Final Motion section for the third rectangle.
11. Test the page by choosing File > Preview Page in Browser. Scroll the page to see each of the tiled rectangles appear to move diagonally until you scroll down to the bottom of the page. As you scroll up, the rectangles also continue to move.
12. Close the browser and return to the Muse workspace.

Masks

In this example, a bar graph appears to animate into place. A pink arrow graphic extends upward, weaving above and behind the bars in the graph. Although the bars in the graph appear to grow taller from the bottom of the chart, they are actually solid colored rectangles with motion scroll effects applied that appear out from behind larger white rectangles (filled with the same solid white color as the background color of the page).

This example uses several techniques in conjunction with scroll effects. The elements are arranged in front and behind each other using the Layers panel. White rectangles are drawn on top of the graph elements. When the white rectangles are covering the bar graph, the bars and arrow are hidden from view—as though they are masked. The white rectangles and the chart table use 0 settings in the motion scroll effects to remain in place as the page scrolls. The bars and the pink arrow graphic that are layered below have motion scroll effects applied that cause them to move up and into view as the bar graph is assembled.

Follow these steps to create a similar mask effect:

1. In Design view, choose Page > Page Properties. Set the Min Height field to a much larger value. In the site example, the minimum height of the page is set to 6076 pixels.
2. Set both the Page and the Browser Fill to a solid white color (or any color you prefer - but use this same color to fill the mask rectangles later).
3. Use the Rectangle tool to draw a large rectangle on the page. The rectangle in the example site is 804 pixels wide by 489 pixels high.
4. Set the fill color of the rectangle to none. Set a stroke color of your choice. In the Stroke menu, set the left and bottom sides of the rectangle to display a stroke with a weight of 20, while the top and right sides are set to 0 to hide the stroke. This creates the foundation of the bar graph chart.
    

5. While the rectangle is selected, open the Motion tab of the Scroll Effects panel. Set the key position and enter 0 in all four of the fields. This setting means that the rectangle will not move before or after the key position is reached, so that the element stays in place.

6. Use the Rectangle tool to draw two larger rectangles. Draw the first rectangle to align with the left side of the chart. In the example site, the rectangle is 657 pixels wide by 1810 pixels high.
7. Draw the second rectangle below the chart, to align with its bottom edge. In the example site, the rectangle is 1002 pixels wide by 1541 pixels high.
8. Set the fill color of both rectangles to white (or the same color as the browser fill color) and the stroke to 0. Use the Selection tool to align the rectangles with the two sides of the chart.
   

9. While the rectangles are selected, right-click and choose Object > Group to group the two mask rectangles together.
10. While the group of rectangles is selected, open the Motion tab of the Scroll Effects panel. Set the key position (in the example it is 1516 pixels) and enter 0 in all four of the fields. This setting means that the group of white rectangles will not move before or after the key position is reached. The group stays in place just like the outer table for the chart.
11. Use the Layers panel to temporarily hide and lock the group.
12. Scroll down to the space below the group and use the Rectangle tool to draw a total of five rectangles that are all the same width. In the example site, all of the bars are 74 pixels wide and have varying heights. Going from left to right, the heights of the five rectangles in the example are 141, 188, 292, 444, and 583. All of the rectangles are filled with the same green color as the stroke that defines the left and bottom edge of the graph chart.

13. The location of the rectangles (from left to right) are listed below, by their X and Y values:
    • X: 200 Y: 2622
    • X: 330 Y: 2797 
    • X: 460 Y: 3081 
    • X: 590 Y: 3304 
    • X: 721 Y: 3499
14. Next, select each of the rectangles, starting with the rectangle on the left and working towards the right. Select each one, enable the Motion checkbox in the Motion tab of the Scroll Effects panel and set the following key positions:
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
15. While all the rectangles are selected, update the settings in the Scroll Effects panel, so that the Initial Motion section moves up at a rate of 1 times the speed of scrolling. Set all other fields to 0.
     

16. Place a PNG with transparency on the page. In the example site, the PNG file is a graphic of a pink arrow that zigzags upwards. The PNG used for this example is 695 pixels wide by 443 pixels high. After placing it on the page, move it to the location X: 78 and Y: 3427.
17. In the Layers panel, arrange the PNG file to be below the first and third bar rectangles (from the left) but above the second, fourth, and fifth bars.

18. While the arrow image is selected, open the Motion tab of the Scroll Effects panel and enable the Motion checkbox. Set the key position (in the example, it is 3238 pixels). In the Initial Motion section, set the directions up and to the right and enter .25 times the rate of scrolling in both the Initial Motion fields. Set both fields in the Final Motion section to 0.

19. In the Layers panel, show and unlock the group of two white rectangles that you hid and locked earlier. Move the group above the other elements, so that it displays on top of the other content on the page. Since the group is on top, it will act as a mask to only show the bars and arrow graphics when they move up inside the frame of the chart.
20. Test the page by choosing File > Preview Page in Browser. Scroll the page to see the bar graph chart move into position as the two white rectangles that are masking the bars hide the bar graph elements until they are within the chart.
21. Close the browser and return to the Muse workspace.

Examples of site designs using scroll effects

Check out the Demential Lab website to see the scroll effects feature in action.