How to use opacity scroll effect in Adobe Muse

In your Adobe Muse website you can choose fluid, fixed breakpoints or combine them. If you select fixed breakpoints, you can add scroll effects. In this tutorial I am going to show you how to apply opacity scroll effects in Muse.

opacity-scroll-effect-muse1

 

Open the Scroll Effects tab an select opacity to activate the options. The most important part is to understand what the values mean:

opacity-scroll-effect-muse2

  • First value is the behaviour of the element before the key point
  • Second value is the key point. 
  • Third value is the behaviour of the element after the key point.

What I want to achieve is that when I scroll down, elements will appear. First they will not be visible but when you reach to a point, they will all appear. This is how to do it:

  • Select the element and open the Scroll Effects tab.
  • Type the first value. As I want the element to appear, it needs to be set to 0% opacity.
  • Add the key point. I want the element to completely appear when it hits the key point, so set the value to 100% opacity.
  • Select the third value and set it to 100% opacity too.

You can add opacity scroll effects to as many web elements as you want. Watch the tutorial to see how it is done.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top