Create a Staggered Animation Sequence in Adobe Muse. No Coding Skills Required.
In the video tutorial above I go over how to use the Staggered Animations Widget found at http://museforyoushop.com. With this widget you can create a staggered animation sequence with multiple elements – All with just one graphic style name.
FEATURES INCLUDE:
- Animate multiple elements with one graphic style name
- Set the delay for when each element animates in the sequence
- Set the duration of each animation in the sequence
- Choose from over 30 different easing options for the animation sequence
- Autoplay the animation sequence
- Infinitely loop the animation sequence
- Add a play, pause, and restart button to control the animation sequence
- Change the transform-origin of the transformations
- Apply transformations randomly to the elements in the sequence for a more scattered effect
- Disable animation sequence at a particular breakpoint
- Lightweight for your website
TRANSFORMATIONS:
- Scale – Make the elements larger or smaller.
- Rotate – Rotate the elements in degrees.
- Translate X and Translate Y – Move the elements on the x and y axis.
- Border Radius – Change the border radius of the elements. Works well with rectangles and ellipses created in Adobe Muse.
- Background Color – Change the background color of the elements. Works well with rectangles and ellipses created in Adobe Muse.
TRIGGER ANIMATIONS:
- On Load
- On Scroll
- With Play Buttons
Here are the steps to create a staggered animation sequence.
1. Drag and drop the “STGRD – Add First” widget from the library panel and place at the top of your Adobe Muse website. If you do not see the library panel you can go to Window > Library.
2. Drag and drop the “STGRD – On Load” widget and place below the “Add First” widget.
3. Place all of your elements into Adobe Muse. If you are using a vector from Adobe Illustrator you can copy and paste each element into Adobe Muse. The elements will be pasted in as scalable vector graphics (SVG).
4. Select all of the elements in Adobe Muse and assign the graphic style name that is in the widget to the elements. This is done via the Graphic Styles Panel. If you do not see the graphic styles panel you can go to Window > Graphic Styles.
5. After the graphic style is applied you can set what animation you would like to apply to the elements. You can scale, rotate, translate x, and translate y. You can also change the background color and border-radius of the elements if they were created in Adobe Muse.
6. Preview page in browser to watch each element animate 1 by 1 after one another in a staggered fashion.
7. To change the speed of the stagger you can change the “Animation Stagger Delay” option and the “Animation Duration” option.
8. Done.
Note: If all elements were created in Adobe Muse you can create a transparent rectangle over all of the elements to have them animate in the order they are in within the Layers Panel.
For more widgets and video tutorials for Adobe Muse visit http://museforyoushop.com.
Happy Musing :).