Welcome to the Scroll Show Widget

Reveal elements on scroll in your Adobe Muse website with the Scroll Show Widget from Muse For You.

Before beginning, add the 'Scroll Show - Add First' widget to the top of your Adobe Muse website. It can be placed on the Master Page.

Select the element to which you want to assign the animation, apply a graphic style to it via 'Graphic Styles' panel (Window > Graphic Style) within Adobe Muse.

From the library panel, drag the 'Scroll Show' widget and place onto your website. It can be placed off-canvas. Enter the graphic style name you just applied. Rest of the widget options are discussed below.

Choose from 7 different animation settings with over 20 easing options

01

FEATURE #ONE

Make sure that the Graphic Style name of the element and that in the widget options are the same

With this widget, you can apply on scroll animation to any element - text, image, or shape, or button on your Muse website. Animation options include - Duration and Delay (in milliseconds), Rotation along X, Y, or Z axis, Scale, Opacity, and Easing. If you would like to have the same 'Scroll Show' effect for multiple elements, simply apply the same graphic style name to each one of them.

Also, you can choose to repeat the animation on scroll by selecting the 'Repeat on Scroll' checkbox in the 'Animation' section within widget options.

Below are some examples with different animation settings.

Works across all devices

02

FEATURE #TWO

Scroll Show Widget is fully responsive and works in Adaptive Design and Fluid-Width Design. However, if you don't want the animation to occur on mobile breakpoint, you can disable it by unchecking the 'Play on Mobile' checkbox in the 'Animation' section within widget options.

Select from what direction the element will appear on scroll

In second section within widget options, there is a drop-down - 'Origin'. This is what defines the direction from which the animation originates.

You can have the element appear from bottom, left, top, or right direction. Also, you can set the origin distance in pixels or percentage.

In this example, every text box is appearing from different direction and different origin distance.

Additional Information and options

03

INFORMATION

Viewport = Browser Window, 1000 milliseconds = 1 second

You can set how much of the element is visible in the browser before it animates, set a viewport offset for the elements appearing on scroll, and have the elements reveal in a sequence.

OPTION #1

View Factor

  • It is the amount of the element to show before starting the scroll animation. Values are equal to percent based values.
  • Setting the value to 0.5 will animate the element when 50% of the element is visible within the viewport and 1 will animate the element once 100% of the element is visible within the viewport. Setting the value to 0 will animate the element as soon as it enters the viewport

OPTION #2

Stagger Delay

  • If the “Stagger Delay” option is left at 0 the elements will reveal when scrolled to. If the stagger delay is greater than 0 all elements with the same graphic style name will reveal in a sequence.
  • To have elements reveal from left to right, group elements within the same row.

OPTION #3

Viewport Offset

  • It is for fixed elements on the website. For example if you have a fixed header that is 50 pixels in height you can set the top viewport offset to 50 pixels to make up for the 50 pixel header.