Muse Motion - For Adobe Muse CC

Powered by the Greensock Animation Platform (GSAP)

• created: 03/09/2016
• latest update: 01/18/2017
• by: John Ramos - Muse For You
• email: john@museforyoushop.com

Welcome to the Muse Motion Widget by Muse For You.

Welcome to the Muse Motion Widget from Muse For You. This widget is powered by the GreenSock Animation Platform found at Greensock.com. It is one of the best, if not the best animation platform for the web. With this widget you can scale,rotate, skew, and translate any element on your Adobe Muse website.

• Add First: Add this to the top of your Adobe Muse website before you begin.
• Muse Motion Widget: Apply 2D transformations to individual elements.

To enable a transformation simply click on the enable transformation check box and change the options for that transformation. This widget ensures that any transformation that is not checked will not be read by the browser saving time for your website load time.

You can start your element FROM the transformation or TO the transformation. The Auto Alpha option allows you to have your element be visibile or not visible initially by setting this option to 0 or 1. 0 is not visible at first, and 1 is visible at first.

The following documentation will outline all the widget options and how to use them. I am excited to be sharing this widget with you.

The are the steps for applying the Muse Motion widget to any element on your Adobe Muse website.

1. Select the element

2. Apply a graphic style name to the element using the graphic styles panel in Adobe Muse.

3. Make sure the widget has the same graphic style name in the widget options.

Notice that the graphic style created in the graphic styles panel is the same as the graphic style name in the widget. Because the element has the graphic style name of the widget assigned to it you can apply any transformations to that element using the widget options.

You can trigger the animation with these widget options:

Instance Number - You can have multiple instances of the sequence widget. Which allows for multiple sequences on 1 page.

Graphic Style Name - This is the graphic style name you will want to assign to the element you would like to transform or animate. If you change this name here you will also have to change it for the graphic style of the element so that this widget adds the transformations to that particular element.

Select Animation Start - You can start your animation:

• On Load
• On Hover
• On Hover with Reverse
• On Click
• On Scroll

On Scroll Offset From Top (0-1) - When you would like the animation to start from the top of the browser. Select a value between 0 and 1. 0 is the top of the browser and 1 is the bottom of the browser. As an example if you select .5 it will trigger the animation once it is in the middle of the browser and so on.

Time Scale - How fast you would like the entire sequence to play. 1 is normal and anything lower than 1 is slower. Anything higher than 1 is faster. This changes the speed of all the animations globally. You can also change the speed of each individual transformation.

Each Transformation comes with the following options:

Enable (Transformation) - Check this box to enable the transformation.

Animation Start - Have the element animate To the transformation or animate From the transformation.

Transformation Amount - How much you would like the element to transform for that particular transformation.

Transform Origin X - From what point on the X-Axis you would like the animation to animate from in the element. This option is in percentage. To have the element animate from the left side enter 0. To have it animate all the way to the right enter 100.

Transform Origin Y - From what point on the Y-Axis you would like the animation to animate from in the element. This option is in percentage. To have the element animate from the top enter 0. To have it animate from the bottom enter 100.

To have the animation animate from the center enter 50 for Transform Origin X and 50 for Transform Origin Y.

Duration - How long you would like the transformation to go for. This option is in seconds. You can go up to 2 decimal places.

Delay - How long you would like to wait for the transformation to start. This option is in seconds. You can go up to 2 decimal places.

Repeat - How many times you would like the transformation to repeat. Enter -1 to have it repeat infinitely.

Repeat Delay - How long you would like the transformation to wait before it repeats again. This option is in seconds. 

Easing - Choose from the following easing options for your transformation:

Easing Type - Choose the easing type for your transformation. Choose from:

Auto Alpha - This is the same as opacity. If you are starting From the transformation set this to 0 so that the element is not visible before the animation starts. Set it to 1 if you do not want any fade change. If you are starting To the animation and you would like the animation to fade out once it is done set this option to 0 and it will fade out the transformation. Set it to 1 if you do not want any fade change.

With the Muse Motion Widget you can scale, rotate, skew, and translate any element on your Adobe Muse website. The transformations will transform on a 2-dimensional plane. The transformations include:

• Rotate - Rotate your element clockwise or counter-clockwise in degrees or radians.
• Scale - Scale your element larger or smaller.
• Skew X - Skew your element in degrees or radians on the X-Axis.
• Skew Y - Skew your element in degrees or radians on the Y-Axis.
• Translate X - Move your element left or right in pixels or percentage on the X-Axis.
• Translate Y - Move your element left or right in pixels or percentage on the Y-Axis.
• Background Color - Change the background color of your element.

• You can have your element animate From the transformation or animate To the transformation by using the "Animation Start" option. When animating From the transformation you can set the Auto Alpha option to 0, and this will make the element not visible when it starts animating.

• You can apply the same transformations to as many elements as you would like as long as the elements have the same graphic style name.

• You can combine as many transformations as you would like onto a single element by enabling multiple transformations.

• To have an animation or transformation infinitely repeat enter -1 in the repeat section.

• To assign graphic style names to different elements on your Adobe Muse website use the "Graphic Styles" panel in Adobe Muse. If you do not see the "Graphic Styles" panel simply go to Library > Graphic Styles.

I've used the following images, icons or other files as listed.

• This widget is powered by GSAP (GreenSock Animation Platfrom): http://greensock.com

• ScrollMagic code by Jan Paepke - janpaepke: http://scrollmagic.io/

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