Welcome to The Staggered Animation Widget by Muse For You
Build a staggered animation sequence with the Staggered Animations Widget from Muse For You. The widget works by applying one graphic style name to multiple elements and then setting a staggered delay for when each element animates. You can scale, rotate, translate, change border radius, and change the background color of multiple elements.
The abbreviated widget name for the widgets is "STGRD." Simply type in "STGRD," in the library panel to bring up the widgets. You can choose between a staggered animation sequence "On Load," or "On Scroll."
Place the "STGRD - Add First - On Load" at the top of your Adobe Muse website before you begin. If you are adding an 'On Scroll' animation sequence use the "STGRD - Add First - On Scroll" widget.
If you are adding an 'On Scroll' animation sequence place the "STGRD - Add First - On Scroll" at the top of your Adobe Muse website before you begin. If you are not adding any 'On Scroll' animations use the "STGRD - Add First - On Load" widget without the 'On Scroll' addition.
Choose from the following transformations for the animation sequence:
The "Transform Origin" section allows you to change the position from where the transformation will occur. Setting the options to 0%, 0% will transform the element from the upper left corner, and 100%, 100% will transform from the bottom right corner, and so on.
These are the widget options for the "STGRD - On Load" widget. The "STGRD - On Scroll" has a few other widget options that are documented in the "STGRD - On Scroll" section.
Instance Number - Each animation sequence requires a unique instance number. Change this number for each new animation sequence.
Graphic Style Name - Enter the graphic style name you would like to assign to the elements you would like to animate.
Animation Stagger Delay (ms) - Set how long you would like each element to wait before it animates. The measurement is in milliseconds so 1000 milliseconds equals 1 second.
Animation Duration (ms) - This is how long you would like each element animation to last. The measurement is in milliseconds so 1000 milliseconds equals 1 second.
Elasticity - How fluid you would like the animation sequence to be.
Initial Opacity - Set the initial opacity for the animation sequence. You can have the sequence fade in by setting this to 0 and then enabling the "Fade In" option in the "Fade In" section.
Easing - Choose from over 30 different easing options for the animation sequence.
Direction - Choose from 3 different options for playing the animation sequence.
Autoplay - Automatically play the animation. If this option is not checked then you will need to add a play button to play the animation sequence.
Loop Animation - Choose wether you would like your animation to play once or loop infinitely. If you enable this option the animation sequence will repeat infinitely.
Enable Fade In - Check this option to enable a fade in for the animation sequence. 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 "STGRD - On Scroll" widget the animation will start when you scroll to the first element in the sequence. These additional options are included with the "STGRD - On Scroll" widget:
On Scroll Offset from Top - The distance from the top of the browser you would like your animation sequence to start. If you enter 1 the animation sequence will start as soon as the element reaches the bottom of the browser. If you enter .5 the animation sequence 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.
Initial Opacity - Set the initial opacity for the animation sequence. You can have the sequence fade in by setting this to 0 and then enabling the "Fade In" option in the "Fade In" section.
Repeat Animation - This option allows you to repeat the animation sequence 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 animation sequence 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.
With the "STGRD - Random" widgets you can choose a minimum value and maximum value for any of the transformations. This will choose a random value between the min and max value and apply it to different elements in the animation sequence.
You can disable the staggered animation sequence at a particular breakpoint by enabling the "Disable at Breakpoint" option in the breakpoint section. Then enter in the breakpoint value where you would like the animation sequence to not play.
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.