You are viewing a degraded version of this page. Please use a supported browser for the best reading experience.

Transition

Make it graceful

Create Transitions Using Helper Classes

Step 1 Add fx/transition to your article’s assets.

Step 2 Type some text in the box and pick classes using the buttons below.

Step 3 Add these classes to the thing you’d like to animate in the Codex editor:

Roll Your Own With CSS

If you want more control, it’s easy to add your own transitions using CSS. This also lets you apply the effect to many elements on the page at the same time.

Step 1 Add fx/transform to your article’s assets.

Step 2 Pick the transition you want to customize in the class name generator above.

Step 3 Enter the selector for the HTML element (or series of elements) that you are targeting, e.g. aside.pullquote will target all the pull quotes on the page and h1.hed would target the headlines.

aside.pullquote

Step 4 Paste this code into the styles editor of your article:

Or use this code, which takes advantage of the transition shorthand property:

Step 5 Add the class .onscreen to the elements you want to animate, so that the transition will be triggered when the reader scrolls them into view. This is accomplished with the Javascript that you added in step one.

Step 6 Customize the values for your transitions. For instance, if you wanted a more aggressive zoom, you could change the values in the zoom animation to scale(.7) or even scale(.5).