Learn how to add and use various types scroll effects, such as piece-by-piece, sliding menu, roll-up, and more.
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:
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:
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.
While both elements are selected, notice that the values that are the same for all selected items display in the fields. In this example, both the rectangle and the group are set to 0 for the vertical direction in the Initial Motion section, and 0,0 in the Final Motion section. No value is displayed in the horizontal field of the Initial Motion section, because the group is set to move to the left at 1 times (the same speed as) the rate of scroll, while the rectangle is set to 0.
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.
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:
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.
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:
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.
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:
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.
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.
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.
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:
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.
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:
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.
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:
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.
If you choose to duplicate a text frame to create the drop shadow effect, you can group two or more iterations of a text frame and control them as a single group when you apply scroll effects.
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:
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).
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.
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:
For this example it doesn't matter if you set a browser fill color, because the page is covered with rectangles. Set the page fill color to none.
In the example site, the third rectangle is longer than the first two. You can drag the handles to expand the height of the third duplicated rectangle or create a fourth rectangle to fill the remaining page area at the bottom.
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:
Check out the Demential Lab website to see the scroll effects feature in action.