Fantastic 74 Widget 2.0 - For Adobe Muse CC

74 Animation Effects for your Adobe Muse website

• created: 08/15/2015
• latest update: 08/02/2016
• by: John Ramos - Muse For You
• email: john@museforyoushop.com

Welcome to the Fantastic 74 Widget 2.0 by Muse For You

The new update to the Fantastic 74 widget now takes up less code in the back-end of your website and the 'On Scroll' animation now works across all breakpoints.

• New widget setup
• Animations take up less code in the back-end.
• New ‘On Scroll’ setup.
• Ability to add indicators for ‘On Scroll.’ This allows you to see where the element will animate within the browser.
• New ‘Fade In’ and ‘Fade Out’ options.
• 'On Load’ animations do not appear before the animation starts.
• Abbreviated widget names for easier access when searching in the library panel.
• Instructions included within the widget for easy reference on how to use the widget.

You can now select the different animation start options via the Library Panel.

Place the "F74 - Add First" at the top of your Adobe Muse website before you begin. If you are adding 'On Scroll' animations use the 'F74 - 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 "F74 - On Scroll" has a few other widget options that are documented in the "F74 - On Scroll" section.

Animation

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.

Fade In

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 "F74 - On Load" the animation will start as soon as the page loads.

With the "F74 - On Hover" the animation will start when you hover your mouse over it.

With the "F74 - On Click" the animation will start when you click on the element.

With the "F74 - On Scroll" the animation will start when you scroll to the element. These additional options are included with the "F74 - On Scroll" widget:

On Scroll

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.

Fade Out

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:

1. Click on the element
2. Open the "Graphic Styles," panel in Adobe Muse.  If you do not see the "Graphic Styles," panel simply go to window at the top of the browser and select "Graphic Styles."
3. Create a new graphic style by selecting the small square icon that looks like a piece of paper in the bottom right of the panel.
4. Name the graphic style the same as the graphic style name you chose for the animation in the widget options.
5. This will assign the graphic style name to the element and because the "Fantastic 74" widget has the same graphic style name it will trigger that element to animate.

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