Animation Effects

Use animation effects to animate an element when triggered by an event. Triggered events can run the animation by adding the active state class in javascript from an action such as screen scroll.

Examples and Code

Select exampleAdd animation effectSet animation speedSet animation scroll position

Open Full Example

<p class="animexamplepara">Scroll to see example 1</p>
<div class="uowdf-anim-effect--fade-in uowdf-anim-speed--slow">Fade in Element</div>
<p class="animexamplepara">Scroll to see example 2</p>
<div class="uowdf-anim-effect--slide-in-left">Slide Element in from the Left</div>
<p class="animexamplepara">Scroll to see example 3</p>
<div class="uowdf-anim-effect--slide-in-right">Slide Element in from the Right</div>

Open Full Example

<div class="uowdf-anim-effect--fade-in uowdf-anim-speed--slow">Slow Speed Animation Element</div>
<div class="uowdf-anim-effect--slide-in-left uowdf-anim-speed--medium">Regular Speed Animation Element</div>
<div class="uowdf-anim-effect--slide-in-right uowdf-anim-speed--fast">Fast Speed Animation Element</div>

Open Full Example

<div class="uowdf-anim-effect--fade-in uowdf-anim-marker-position--early">Animates before scrolling into frame</div>
<div class="uowdf-anim-effect--slide-in-left uowdf-anim-marker-position--late">Animates after scrolling into frame</div>

Usage

Two animation classes must be added to an element to make the animation function. The first type of class describes the visual effect of the animation, the options for these are the following:

• uowdf-anim-effect--fade-in (Fade an element in)
• uowdf-anim-effect--slide-in-left (Slide an element in from the left)
• uowdf-anim-effect--slide-in-right (Slide an element in from the right)

These effect classes can be combined to animate over multiple effects at once, though this should be kept at a minumum because it can further overwhelm the user with motion.

The other type of class is the toggle or trigger class, this class is uowdf-anim--activated. Once this class is added to an animatable element, the animation will run. This class can be added with any javascript based trigger or event, such as when the element scrolls onto the screen.

Modifier Classes

Animation Speed Adjustments

The speed of the animation can be adjusted with these classes. Animations will run at the medium speed (one second) by default.

• uowdf-anim-speed--slow (2 seconds)
• uowdf-anim-speed--medium (1 second, default)
• uowdf-anim-speed--fast (.5 seconds)

Page Scroll Position Adjustments

When triggering an animation as it scrolls onto the screen, we can add modifier classes to adjust the trigger point to happen earlier or later.

• uowdf-anim-marker-position--early (Will toggle slightly before the user scrolls it into view)
• uowdf-anim-marker-position--late (Will toggle slightly after the user scrolls it into view)

Guidance

Usage Guidance

• For immersive stories: Use to provide effects on an image or element in immersive stories when the story calls for it.
• Don’t use on every image on a page
• Don’t use movement effects on large elements

Accessibility Guidance

• Use animations sparingly:. The movements caused by animations can cause seizures, migraines, nausea, and dizziness for some people, and can be distracting for many others. Refer to the UO Accessibility Guidelines for Motion for more information.
• Allow users to disable animation effects: While the effects we provide in CSS will not execute if the user has the “prefers-reduced-motion” setting on their OS enabled, many users are not aware of this feature and may be unable to use a page with these effects. You should present the user with an active dialog such as a checkbox that toggles the “disable-animation” class onto the page body. This class is an extra cue to the styles to deactivate animations.