How to Use Adobe Muse Scrolling Effects

In this walkthrough, we've shared how to use Adobe Muse scrolling effects, so you can create the illusion of depth in your website. 

What are Adobe Muse Scrolling Effects?
Adobe's website builder allows you to design animated content layers, which move at different speeds when you scroll down the page. You can also add complex scrolling effects that happen at the same time, such as changing opacity, Slideshow widgets, and more. 

When two layers move at different speeds, it plays a subtle trick on our eyes, and the top layer "pops" like it has three dimensions. Scrolling effects are also useful for web designers who want to add anchor tags to a site. When a visitor clicks on one of these anchor tags, the page will automatically scroll down to the relevant section.   

You can apply scrolling effects to almost any element in Muse, including background images, graphics, and text frames. Just make sure the element's state is set to "Normal" before applying these effects. 

How to Create a Scrolling Effect
1. Once you've launched Muse, select the Rectangle tool and draw a rectangle on your page. Then, click the 100% Width button in the control panel, so that your rectangle spans the full page width. 

2. With the rectangle still selected, click on the Fill setting in the control panel, and  choose "Add Image" to fill it with an image. If you'd like the image to fit proportionally inside the rectangle, go to the Fitting setting and choose "Scale to Fill". You can also enable the Position setting to center your image on the page.  

3. If you'd like to place some text on the image, select the Text tool and drag on your page to create a text box. Start typing to enter your text, and then adjust the control panel settings for font, color, and more.  

4. Now it's time to add scrolling effects to your image and text. Muse has a wide range of effects to choose from, but in this example, text will appear on your image as you scroll down the page. First, select the image and open the Scroll Effects panel on the right side of the screen (or choose "Window" > "Scroll Effects"). 

5. In the same panel, turn on the "Motion" setting. You should see a separate line appear on your page, called the Key Position, which you can drag up and down with the mouse. The Key Position allows you to set a threshold for certain effects to take place. As you start scrolling down the page, the scroll effect is in the Initial Motion range. Once the marker hits the top of your browser, the effect switches to the Final Motion range. 

6. For the text scrolling effect, drag the Key Position so that it's on the top border of your image. You want the image to stop scrolling when it hits the top of your browser, so enter "1" for Initial Motion and "0" for Final Motion. 

7. Finally, select the text and enable "Motion" on the Scroll Effects panel. Enter "1" for the Initial Motion, and click on the downward arrow, so that the text moves from top to bottom. Then, enter "0" for the Final Motion, and click on the upward arrow for this setting. Set your text's Key Position in the same place as your image, so that they sync up, and your scrolling effect is ready!
 
  • Was this article helpful?

Can’t find what you’re looking for?