Simple & Sweet On Scroll Animations Widget

A widget dedicated solely to on scroll animations. You can choose from up to 26 animations and set the position of when the element animates on scroll.

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

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 'SSOSA 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 26 different on scroll animations

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 on your Muse website. You can choose from 20 easing options. You can even set the animation duration and delay (in milliseconds).

Also, you can choose to play the animation once by selecting the 'Play Once' checkbox within widget options. If this options is not selected, the animation will play every time the site visitor would scroll to the element.

Below are some of the examples with different animations, easing, durations, and delays.

Works across all devices

02

FEATURE #TWO

SSOSA Widget is fully responsive and works in Adaptive Design and Fluid-Width Design. However, if you don't want the animation to occur at a certain breakpoint, you can disable it in the 'Breakpoint' section within widget options.

Select at what

point in the browser the element will animate

In widget options, there is a drop-down - 'Anchor Placement'. This is what defines the position of animation and triggers the element to animate.

If ‘top-bottom’ is selected for example the element will animate when the top of the element reaches the bottom of the browser. If 'center-center' is selected the element will animate when the center of the element reaches the center of the browser.

Adding an offset will move the anchor placement up or down. If a positive number is entered it will move the anchor placement up. If a negative number is entered it will move the anchor placement down.

Below are some examples with different 'Anchor Placements'.

Another element to trigger the animation

03

FEATURE #THREE

Make sure that the Graphic Style name of the trigger and that in the Element Trigger section are the same

You can have another element trigger the animation by selecting "Enable Element Trigger" and assigning the graphic style name from this option to an element. Once this element reaches the anchor placement the main element will animate.

In this case, the trigger for the image below is the feature number text box and the Anchor Placement is set to 'Top-Top'. The image animates as soon as the top of the trigger reaches the top of the browser.

Make Better Websites, Starting Today.

All access pass for only $49/year.

Have questions about our products?

We are here to help.

Tutorials

Subscribe

Browse Widgets

Tutorials