Welcome to

the Animator Widget 2.4

The most extensive collection of animation effects for any element on your Adobe Muse website. Choose from 139 Animation Effects. You can trigger the animation on load, on click, on hover, and on scroll, and even set the duration of the animation.

Samples and Features

How to use the widget

Each new animation effect has a unique instance number.

If there is a group of elements, it is always good to put them in a state button and then apply a graphic style.

Before you begin, drag the 'ANMTR - Add First' widget from the Library Panel (Window > Library) and place it at the top of your Adobe Muse website.

Now, to assign an animation to an element, apply a graphic style to it via the 'Graphic Styles' panel in Muse.

After you have applied the graphic style, drag and drop one of the 4 Animator widgets. You can choose from - On Click, On Hover, On Load, and On Scroll. In this case, we have used the 'ANMTR - On Scroll' widget.

Open widget options. Enter the graphic style name you just applied, select the Animation Effect, Delay, and Duration (1000 milliseconds = 1 second). You can even choose to loop the animation effect by selecting 'Loop Animation' checkbox.

In this example, the text blocks have different effects and durations, and heading, paragraph and text blocks are set to 'Repeat on Scroll'. The circle in the background is set to 'Loop Animation'.

01

Trigger Animations on Load, Hover, Click, or Scroll

FEATURE #ONE

Always be sure to put a unique instance number for each new animation effect

In this case, we have used 'ANMTR - On Hover' and 'ANMTR - On Click' widgets. Hover over these boxes to see the effect in action. To see the click animation, click the button below.

You can Choose whether you would like your animation to play once or loop infinitely. If you enable the 'Loop Animation' option, your animation will repeat infinitely. If you want want your animation to play for a certain number of times, put that number in the 'Animation Iteration' field within the widget options.

Click here for Click Effect

02

Disable the Animation at a certain Breakpoint

FEATURE #TWO

Open widget options. In 'Breakpoint' section, you can enter a breakpoint value at and below which you do not want any animation effect. In this case, no object has been disabled at any breakpoint.

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