Motion: Movement

Movement styles allow you to bring content in from all sides and slide it into place. Use this in one general direction, and keep the movement where the user feels confident how the content flow is going to travel.

Basic Style Format

The idea here is to start content coming in from a location that off position just a small amount so that by the time you're ready to read it things should be in position. These are not designed to slide all the way across the screen or scream past the view space in a blur. They are to be graceful and short animations.

motion-move-up
motion-move-down
motion-move-left
motion-move-right

Use with:

- motion-delay-1 to motion-delay-10
- 1 will be shortest dealy, with 10 being the longest.

right col

left col

motion-move-up

Move Up

Content that moves up as you scroll down the page.

right col

left col

motion-move-down

Move Down

Content that falls down as you scroll through the page.

right col

left col

motion-move-left

Move Left

Content that moves left as you scroll through the page.

right col

left col

motion-move-right

Move Right

Content that moves right as you scroll through the page.

right col

left col

right col

left col

Delayed Movement

One of the better ways to use movement is to pair it with a delay setting. Below we have eight boxes which will all move up into position with a dealy on each one. This keeps the movement the same, but gives the user time to see that there are separate items below. This is great for event notices, upcoming special dates, or services that you don't want people to scroll over and not see.

right col

left col

The first item you find.

The second item you find.

The third item you find.

The fourth item you find.

right col

left col

The fifth item you find.

The sixth item you find.

The seventh item you find.

The eighth item you find.

right col

left col

right col