If you are using 'On Scroll' motions, place the 'Muse Motion - Add First - On Scroll' widget at the top of your Adobe Muse website.

In first section within widget options, you can 'Select Motion Start' to on load, on hover, on click, or on scroll.

The 'On Scroll with Reverse' option allows you to trigger a motion when the page is scrolled a certain amount. When the page is less than the scrolled amount, the motion will play in reverse. This is great for creating a Sliding Down Parallax Menu.

If you want to have the element trigger itself, simply enter the same graphic style name for the main element and the trigger element in widget options.

02

Trigger motion on load, hover, click, or scroll

In each 'Motion' section within widget options, you can choose from 8 different motion transformations - Opacity, Rotate, Scale, Skew, Translate, Width or Height change, or Border Radius

Within this section, you can set the duration, delay, and unit measurement. Click here for a guide for what unit of measurement pertains to each transformation.

The 'Repeat' option allows you to set how many times you would like the tranformation to repeat. Enter '-1' to have it repeat infinitely.

03

Choose from 8 different motion transformations and over 30 easing options

Note: You can start your animation 'From' or 'To' the transformation. The 'Auto Alpha' option allows you to have your element be visible or not visible initially. It can be set to 0 (not visible) or 1 (visible at first).

'Motion Value' is the amount of tranformation. For example, if you would like your element to translate vertically (Translate Y) from 30px below its actual position, set the motion value to 30. Enter in a negative value to have the element translate from above its actual position.

To have the motion play forward and then back, enable the 'YoYo' option and set the 'Repeat' option to '1'.

With the 'Muse Motion - Color' widgets, you can change the background color or font color of an element up to 12 times. The motion settings that apply for transformation apply for the colors as well.

On this page, you will have noticed that the background color changes as you scroll. For this effect, we have used multiple instances of the  'Muse Motion - 1 Color' widget with different triggers (i.e. different Trigger Graphic Style Names) placed at different positions that change the color of the background rectangle when scrolled to.

Note: If you are creating rectangles for triggers, make sure they are not transparent and they have different graphic style names assigned to them. Give them some color, select all of them, right click and send to back (Arrange > Send to Back) so that they are not visible when scrolling.

04

Change background or font color of an element

WELCOME TO THE

MOST ADVANCED

MOTION WIDGET FOR

ADOBE MUSE

WELCOME TO THE MUSE MOTION WIDGET

Rotate, Scale, Skew, Translate, change Opacity, change Background Color, and change Width, Height, and Border Radius of any element on your Adobe Muse website with the Muse Motion Widget from Muse For You. Powered by Greensock Animation Platform (GSAP)

Assign a graphic style name to the element you would like to apply the motion to. Enter that graphic style name in the first section of the widget options.

If you would like another element to trigger the motion, apply the graphic style name to that element and enter that name in the ‘Trigger Graphic Style Name’ option within widget options. Once the user interacts with that element, the main element will animate

01

Using the widget and initial steps

Drag the widget from the Library Panel (Window > Library) and place onto your Adobe Muse website. Choose from 1, 4, 8, or 12 motions.

Make Better Websites, Starting Today.

All access pass for only $49/year.

Have questions about our products?

We are here to help.

Tutorials

Subscribe

Browse Widgets

Tutorials