Muse Motion 2 - For Adobe Muse CC

Powered by GSAP from Greensock


Welcome to the Muse Motion 2 Widget by Muse For You.

Muse For You - Muse Motion 2 Widget - Adobe Muse CC

Welcome to the Muse Motion 2 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 apply 2D transformations as well as 3D transformations to any element on your Adobe Muse website. You can also sequence up to 8 animations and have them fluidly animate one after another. This widget comes with 5 differeent widgets. They are:

 

Muse For You - 3D Transformations Graph

 

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 2 widget to any element on your Adobe Muse website.

1. Select the element

Muse For You - Muse Motion 2 - Select Element - Adobe Muse CC

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

Muse For You - Muse Motion 2 - Graphic Styles Panel - Adobe Muse CC

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

Muse For You - Muse Motion 2 - Assigning Graphic Style - Adobe Muse CC

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.

Muse For You - Muse Motion 2- 2D Transformations Widget Options - Adobe Muse CC

You can trigger the animation with these widget options:

Muse For You - Muse Motion 2 - Trigger Animation - Adobe Muse CC

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 Scroll Offset From Top (%) - When you would like the animation to start from the top of the browser. This is in percentage so if you select 50 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:

Muse For You - Muse Motion 2 Each Widget Options - Adobe Muse CC

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.

 

Muse For You - Declarative Transform Origin

 

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:

Muse For You - Muse Motion 2 Easing Widget Options - Adobe Muse CC

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

Muse For You - Muse Motion 2 Easing Type Widget Options - Adobe Muse CC

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 2D Transformation can you apply 2D transformations to any element on your Adobe Muse website. The transformations will transform on a 2-dimensional plane. The transformations include:

Muse For You - Muse Motion 2- 2D Transformations Widget Options - Adobe Muse CC

Not only you can apply transformations to individual elements you can also sequence up to 8 animations with different transformations using the 2D Transformations - Sequence Widget.

Triggering the Sequence:

Muse For You - Muse Motion 2- 2D Transformations - Sequence Widget Options - Adobe Muse CC

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

Select Animation Start - You can start the sequence On Load or On Scroll.

On Scroll Graphic Style Name - To have the sequence animate On Scroll create a rectangle around all of the elements in the sequence. Then send the rectangle to the back and assign it a graphic style name. This is what the browser will use to know when to start the animation.

On Scroll Offset From Top (%) - When you would like the animation to start from the top of the browser. This is in percentage so if you select 50 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.

You can add up to 8 different animations for the sequence, and assign the animations to multiple elements on your Adobe Muse website.

Muse For You - Muse Motion 2- 2D Transformations - Sequence - Individual Widget Options - Adobe Muse CC

The same transformations from the individual transformation widget are available for each of the elements in the sequence.

Graphic Style Name - The graphic style name for the element you will be applying the transformation to.

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 want 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.

 

Muse For You - Declarative Transform Origin

 

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. 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.

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

Muse For You - Muse Motion 2 Easing Widget Options - Adobe Muse CC

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

Muse For You - Muse Motion 2 Easing Type Widget Options - Adobe Muse CC

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.

The following transformations are available for each animation.

Not only can you transform elements in 2D you can also transform elements in 3D. Here is an image showing the difference between 2D Transformations and 3D Transformations:

Muse For You - 3D Transformations Graph

There is a new option in the 3D Transformations widget. This option is called 3D Transform. If you would like to translate your element on the Z-Axis you will need to add a perspective container around the element your are transforming. To do this simply select the rectange tool and draw a rectangle behind the element you are transforming. Then send the rectangle to the back and give it the style name "perspective," or any style name you'd like as long as it matches the graphic style name in the widget for the perspective option. Then in the 3D Transform section you can set the perspective amount. This will create a 3D environment or (depth) for your transformation.

The transformations include:

Muse For You - Muse Motion 2 Widget - 3D Transformations Widget Options - Adobe Muse CC

Not only you can apply transformations to individual elements you can also sequence up to 8 animations with different transformations using the 3D Transformations - Sequence Widget.

Triggering the Sequence:

Muse For You - Muse Motion 2- 3D Transformations - Sequence Widget Options - Adobe Muse CC

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

Select Animation Start - You can start the sequence On Load or On Scroll.

On Scroll Graphic Style Name - To have the sequence animate On Scroll create a rectangle around all of the elements in the sequence. Then send that rectangle to the back and assign it a graphic style name. This is what the browser will use to know when to start the animation.

On Scroll Offset From Top (%) - When you would like the animation to start from the top of the browser. This is in percentage so if you select 50 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.

3D Transform:

3D Container Graphic Style Name - The graphic style name you will be assigning to the perspective container for your transformations.

Perspective - The amount of perspective (depth) you want to add to your transformations.

You can add up to 8 different animations for the sequence, and assign the animations to multiple elements on your Adobe Muse website.

Muse For You - Muse Motion 2- 3D Transformations - Sequence - Individual Widget Options - Adobe Muse CC

The same transformations from the individual transformation widget are available for each of the elements in the sequence.

Graphic Style Name - The graphic style name for the element you will be applying the transformation to.

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 want 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.

Transform Origin Z - From what point on the Z-Axis you would like the animation to animate from in the element. This option is in percentage.

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

 

Muse For You - Declarative Transform Origin

 

Muse For You - 3D Transformations Graph

 

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. 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.

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

Muse For You - Muse Motion 2 Easing Widget Options - Adobe Muse CC

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

Muse For You - Muse Motion 2 Easing Type Widget Options - Adobe Muse CC

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.

The following transformations are available for each animation.

You can Play, Pause, Reverse, Resume, and Restart your animation sequence by assign the following graphic style names to individual elements on your Adobe Muse website and having them act as buttons.

Muse For You - Muse Motion 2 - Sequence Play Buttons Widget Options - Adobe Muse CC

Play Button Graphic Style Name - The graphic style name to apply to the element you would like to act as the play button for the sequence.

Pause Button Graphic Style Name - The graphic style name to apply to the element you would like to act as the pause button for the sequence.

Reverse Button Graphic Style Name - The graphic style name to apply to the element you would like to act as the reverse button for the sequence.

Resume Button Graphic Style Name - The graphic style name to apply to the element you would like to act as the resume button for the sequence.

Restart Button Graphic Style Name - The graphic style name to apply to the element you would like to act as the restart button for the sequence.

Muse For You - Muse Motion 2 - Graphic Styles Panel - Adobe Muse CC

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