left col

Advanced Styles

Motion: Fade In / Grow

right col

left col

The fade in style allows content to appear gracefully as it enters the page. It will change the opacity from transparent to opaque as the content is scrolled into the page's viewable area. Grow styles allow content to expand onto the page. For more options check out the reveal styles which have additional ways to make content appear on the page.

right col

left col

Basic Style Format

These styles will no alter the page height but they do allow content to show up as you scroll down. These effects, like all motion styles, happen only once when the content is in the viewable space.

Use with:

motion-delay-0 to motion-delay-20
0 will be no delay, with 20 being the longest.

right col

left col

Fade In

motion-fade-in

Grow

motion-grow-col
mogion-grow-row
motion-grow-col-zoom
motion-grow-row-zoom
motion-grow-expand

right col

left col

Fade In Examples

As you scroll down the content will appear on the page.

Fade In will not change the size of the content space on the page but it will hide all elements including background images, borders, and colors until it appears. It is by far the simplest of the motion styles.

Below you can see examples of motion delay styles being added to help control when content shows up related to items around it.

Ease into your content

As you scroll down on the page your will see your content appear just after scrolling.

right col

left col

Motion delay content

The content is being held back just a little bit.

Motion delay content

The content is being held back just a little bit behind the first one.

Motion delay content

The content is being held back just a little bit behind the second one.

right col

left col

Grow Examples

right col

left col

motion-grow-col-expand

Yes it has a long style name, but as you'll see below there are two more sections with the same style. As a group they feel connected.

This style starts in the middle and grows out to the edges of the column. This one is great for feeling like you're opening the doors to your site content.

right col

left col

Another content example

The same design can have a feeling of the page opening doors to show new experiences.

motion-grow-col-zoom

Try to find a way to keep your page looking great without overwhelming the user. If you have too much going on it can be distracting and hard to read.

right col

left col

motion-grow-row

This style will grow from center to the top and bottom of the section.

Another Growing Row

You can use background colors as well as images to add to your content.

Zoom Text

This can also be a nice subtle way to grab your user's attention to special evnts or not to be missed topics.

right col

left col

Grow Expand

Content will fade in but also grow from the center out so it appears smaller and fulls the space.

feature example

The whole feature should also grow and expand into view

feature example w/ delay

Add a little motion delay and make a bigger impact

The whole feature should also grow and expand into view

right col