Welcome to The Animator 2.0 Widget by Muse For You
The new update to the Animator widget now takes up less code in the back-end of your website and the 'On Scroll' animation now works across all breakpoints.
You can now select the different animation start options via the Library Panel.
Place the "ANMTR - Add First" at the top of your Adobe Muse website before you begin. If you are adding 'On Scroll' animations use the 'ANMTR - Add First - With On Scroll' widget.
If you are adding 'On Scroll' animations place the "ANMTR - Add First - With On Scroll" at the top of your Adobe Muse website before you begin. If you are not adding any 'On Scroll' animations use the 'ANMTR - Add First' widget without the 'On Scroll' addition.
These are the widget options for the widgets. the "ANMTR - On Scroll" has a few other widget options that are documented in the "ANMTR - On Scroll" section.
Instance Number - Each animation requires a unique instance number. Change this number for each new animation.
Graphic Style Name - Enter the graphic style name you would like to assign to the element you would like to animate.
Select Animation - Choose from 139 Animation Effects.
Animation Delay (ms) - Here you can set a delay for the animation. This means that you can make the animation start after a certian period of time. If you enter in 2000 in this field the animation will start 2 seconds after the animation is triggered. The measurement is in milliseconds so 1000 milliseconds equals 1 second.
Animation Duration (ms) - This is how long you would like the animation to last. The measurement is in milliseconds so 1000 milliseconds equals 1 second. The defualt is set to 1 second which is 1000 millseconds.
Animation Iteration - How many times you would like the animation to repeat.
Initial Opacity - The visibility of the element before it animates. Choose between 0 and 1. 0 is not visible and 1 is fully visible. Set this to 0 and then enable the 'Fade In' option to have the element fade in as it animates.
Loop Animation - Choose wether you would like your animation to play once or loop infinitely. If you enable this option your animation will repeat infinitely.
Enable Fade In - Check this option to enable a fade in for the animation. If this option is selected you will want to set the initial opacity to something lower than 1.
Fade In To - Set the value of the visibility you would like the element to fade in to. Choose between 0 and 1. 0 is not visible and 1 is fully visible.
Fade In Duration (ms) - Set the duration of the fade in. The measurement is in milliseconds so 1000 milliseconds equals 1 second.
With the "ANMTR - On Load" the animation will start as soon as the page loads.
With the "ANMTR - On Hover" the animation will start when you hover your mouse over it.
With the "ANMTR - On Click" the animation will start when you click on the element.
With the "ANMTR - On Scroll" the animation will start when you scroll to the element. These additional options are included with the "ANMTR - On Scroll" widget:
On Scroll Offset from Top - The distance from the top of the browser you would like your animation to start. If you enter 1 the animation will start as soon as the element reaches the bottom of the browser. If you enter .5 the animation will start when the element is in the middle of the browser and so on.
On Scroll Duration (px) - How many pixels the on scroll trigger will last.
Repeat Animation - This option allows you to repeat the animation each time the user scrolls to it again. Check this option to enable it or uncheck to disable it.
Add Indicators - This option will show indicators for when the element will animate on scroll. Enable this option to preview the indicators in the browser, and disable after you have the correct values in the widget so the indicators do not show in the final website.
Enable Fade Out - Check this option to enable fade out for the animation. This will allow you to fade out the animation as it leaves the on scroll trigger.
Fade Out To - Set the value of the visibility you would like the element to fade out to. Choose between 0 and 1. 0 is not visible and 1 is fully visible.
Fade Out Duration (ms) - Set the duration of the fade out. The measurement is in milliseconds so 1000 milliseconds equals 1 second.
To assign the animation to an element:
I've used the following images, icons or other files as listed.
Once again, thank you so much for purchasing this widget. I'd be glad to help you if you have any questions relating to this widget. If you have a more general question relating to this widget, you might consider visiting the forums and asking your question in the "Item Discussion" section.
-John Ramos
Muse For You
Coming Soon.