The Scroll Motion effect

in Adobe Muse

The Scroll Motion effect defines the motion of an item in relation to vertical scrolling in a web browser. As a page is being scrolled down by the user, you can define horizontal and/or vertical motion for an item.

 

This effect opens new design possibilities when designing a Web page. However, it requires some planning. Scroll down, and let me show you how it works.

Photo courtesy: fotolia.

Over the Clouds. Always.

Understanding the Scroll Motion options.

Key Position: when the Web browser window reaches the specified scroll position (expressed in pixels from the top of the Web browser window), the item will be where it is located in the Muse design view.

 

The Chain Icon, when closed, keeps the enter and exit speeds in sync.

 

The Arrow icons define the direction (up, down, left, right) as the page is scrolled down in a Web browser.

 

The numerical values define the speed the object will move horizontally or vertically relative to the Web browser vertical page scroll speed.

A value of 0 indicated the object does not move when the user scrolls the page, while a value of 1 indicates the object moves at the same speed as regular objects scroll on the page. A value of 2, for example, will move the item at 2x the speed of the scroll motion. Personally, I prefer to use values between 0 and 1 (eg. 0.25) which basically mean that the objects move slower than the scroll motion; as I did for the scroll motion effect of the balloon above.

 

If all numerical values are set to 0, the item is basically pinned in a fixed position, relatively to the top of the browser window (see the pinned object on the right of this page).

 

The Scroll Motion effect is only available in the Normal state, and is not available in 100% with items, pinned items, in-line items or items inside a group or widget.

The line below is the Key Position for the items below. When this line hits the top of the browser window, the item will be located where it is located in the Muse design view.

Moving items up and locking them into position (no motion after Key)

Moving item

 

Motion Before Key:

Up: 1

Right: 0

Motion After Key:

Up: 1

Right: 0

 

Item moves up at the same speed of page scroll and locks into position when the Key Position hits the top of the Browser window..

Moving item

 

Motion Before Key:

Up: 1.5

Right: 0

Motion After Key:

Up: 1

Right: 0

 

Item moves up at 1.5x the speed of page scroll and locks into position when the Key Position hits the top of the Browser window..

Moving Item

 

Motion Before Key:

Up: 2

Right: 0

Motion After Key:

Up: 1

Right: 0

 

Item moves up at 2x the speed of page scroll and locks into position when the Key Position hits the top of the Browser window..

Locked item

 

Motion Before Key:

Up: 3

Right: 0

Motion After Key:

Up: 1

Right: 0

 

Item moves up at 3x the speed of page scroll and locks into position when the Key Position hits the top of the Browser window..

The line below is the Key Position for the items below. When this line hits the top of the browser window, the item will be located where it is located in the Muse design view.

Moving items right and locking them into position (no motion after Key)

Moving item

 

Motion Before Key:

Up: 1

Right: 1

Motion After Key:

Up: 1

Right: 0

 

Item moves right at the same speed of page scroll and locks into position when the Key Position hits the top of the Browser window.

Moving item

 

Motion Before Key:

Up: 1

Right: 1.5

Motion After Key:

Up: 1

Right: 0

 

Item moves right at 1.5x the speed of page scroll and locks into position when the Key Position hits the top of the Browser window..

Moving Item

 

Motion Before Key:

Up: 1

Right: 2

Motion After Key:

Up: 1

Right: 0

 

Item moves right at 2x the speed of page scroll and locks into position when the Key Position hits the top of the Browser window..

Locked item

 

Motion Before Key:

Up: 1

Right: 3

Motion After Key:

Up: 1

Right: 0

 

Item moves right at 3x the speed of page scroll and locks into position when the Key Position hits the top of the Browser window..

How the effect above was created..

 

Using Photoshop, I separated the various elements I needed and exported them as individual Web optomized elements (Save for Web...).

- Balloon.png (with transparent background)

- Clouds.png (with a gradient fade to transparency)

- Sky.jpg (for the background image. I chose jpg because the image has no transparency and results in a smaller file)

 

The images were then placed into position in Adobe Muse and then the Scroll Motion effect was applied to them individually.

Balloon.png

 

Motion Before Key

Up: 1 (the object moves up at the same speed as regular objects scroll on the page)

Right: 0.5 (object moves right at half the speed as regular objects scroll on the page)

 

Motion After Key (in order to have the objects continue moving after the Key Position has been reached in the Browser window.)

Up: 1

Right: 0.5

Clouds.png

 

Motion Before Key

Up: 1 (object moves up at the same speed as regular objects scroll on the page)

Left: 0.5 (object moves left at half the speed as regular objects scroll on the page)

 

Motion After Key

Up: 1

Left: 0.5

Sky.jpg

 

Motion Before Key

Up: 1 (object moves up at the same speed as regular objects scroll on the page)

Right: 0.2 (object moves right at 0.2x the speed as regular objects scroll on the page)

 

Motion After Key

Up: 1

Right: 0.2

Text frame

 

The text that moves up is a text frame created in muse and has been placed in between Clouds.png and Sky.jpg so that it appears from behind the clouds.

 

Motion Before Key

Up: 1.1 (object moves up at 1.1x the speed as regular objects scroll on the page)

Right: 0 (the object does not move when the user scrolls the page)

 

Motion After Key

Up: 1 (the text frame continues to move up at the same speed as regular objects scroll on the page)

Right: 0 (the object does not move when the user scrolls the page)

Key Position

 

All items have a Key Position. The Balloon, the Clouds and the Sky have the same. The text frame will be in its final position when the Key Position (left of the Balloon will be hit).

 

This is the important thing to remember when using the Scroll Motion effect in Muse. Items will be in the position assigned to them in the Muse layout when the Key Position reaches the top of the Browser window. Then, depending on the speed assigned, the items will appear in the screen and reach the final postion.

 

It takes some tweaking and testing, but the end result is really fantastic.

 

Adobecadabra!

 

Rufus Deuchler

Worldwide Design Evangelist, Creative Cloud, Adobe.