Scroll Reveal is a simple yet powerful utility widget that uses scrolling to reveal or hide elements on a web page. You'll be amazed how easy it is to create the same smart and classy effects you see on some of the web’s top sites.
Use Scroll Reveal to show alternate navigation layouts, introduce social share icons in the heart of an article, reveal a back-to-top button only once your site visitors reach the bottom of your page, or anything else you can dream up! This simple widget takes just a few moments to set up, and can be integrated into any site – new or old.
- Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
- Current Version: 1.0
- Supported Devices: Desktop, Tablet, Phone
- 1.1: Increased 'Scale Offset' value range (05/24/2017)
- 1.0: Adds collapsible panel functionality and support for responsive Muse
- Drag the widget from the library and drop into your project in Design mode.
- You may place the widget out of the way, off canvas.
- This widget can be used with text, state buttons, images, other widgets – most anything you can think of. Choose the element that you would like to connect with the Scroll Reveal widget and apply a graphic style to it.
- Open the widget option panel.
- Define the graphic style in the widget option panel Graphic Style field.
- Scroll Reveal Mode: This setting sets whether the element is going to be shown or hidden when scrolling.
- Scroll Offset: this setting sets the scroll point (in pixels) at which the reveal or hide function will take place. This setting is counted from the top of the viewport.
- Transition Type: Provides several options for transitions.
- Transition Speed: The time it takes for the transition to complete.
- Transition Easing: Several options for the easing style of the transition.
Keep in mind that elements that are linked to the Scroll Reveal widget will still need to be placed appropriately in Design mode. Even though these elements may be hidden when previewed or published (based on scroll position), they will need to maintain their position in Design mode – which may cause them to cover up other elements.
When using with navigation links in a state button, keep in mind that state buttons are designed to trigger the hover state of everything within at the same time. If you're using individual hover states for elements within a state button, we suggest placing the elements in state buttons within the parent state button.
Commonly Asked Questions
No commonly asked questions
No known issues or conflicts
Additional Info Links