Skip to content

Animation

There are multiple options for animation within courses, some taking more time and effort than others. The one detail they all have in common is that they must be triggered by the user, and must have a fixed end point. Looping animations are extremely difficult if not impossible to make accessible and animations that “play themselves” may not be seen.

Confine animations to trigger on explicit user interactions.

Canned Animation

The framework has set of built-in animation sequences that can be applied to any element that is hidden using the aria-hidden attribute. That applies to feedback, Custom Reveal interactions and Reveal Targets. Many of these animations have been used within this documentation. Here’s the current list (as more animations are planned):

  • Fade
    • fade
    • fade-up
    • fade-down
    • fade-right
    • fade-left
  • Lightspeed
    • lightspeed-right
    • lightspeed-left
  • Rotate
    • rotate-down-left
    • rotate-down-right
  • Zoom
    • zoom-in
    • zoom-in-down
    • zoom-in-up
    • zoom-in-right
    • zoom-in-left
    • zoom-out
    • zoom-out-down
    • zoom-out-up
    • zoom-out-right
    • zoom-out-left

Most often, Developers will choose a default animation when building the feature or interaction. Canned animations can be added or changed at any time during development.  However, timing of the animations is fixed and cannot be altered.

Custom Transformations

Custom combinations of the canned animations can be created, provided sufficient development time. But once created, they can be added to the list of canned animation for future projects.

These animations work by using the CSS Transform property, and can manipulate the position, scale, rotation, skew, in 2D and 3D perspective. These property changes can be performed in sequence using a limited set of 4-5 keyframes.

Custom Animations take a small amount of developer time, so any custom animation must be discussed with the developer prior to development.

Parallax & SVG Animation

As demonstrated in the Styled Carousel Card example, any control that has a numerically restricted area (such as Carousel Cards, Answer Sets, even Multiple Choice) can make use of Parallax and SVG Animation.

These animations use fixed states where an object or objects have specific settings at each state and transition from one state to another.

Parallax animation works by restricting the viewable area of an image, then moving the image across the viewable area. Multiple images of varying sizes moved at the same time create the illusion of realistic motion: Parallax. We can use *.png files to do this, but when combined with SVG, we can manipulate the internal shapes within the image, using the same CSS Transformations described above.

If Custom animations are a small time investment, Parallax requires only slightly more development time, but can require a great deal of artist time and coordination. Images created this way must have very specific dimensions and elements within must be handled delicately.

Again, these animations must be discussed prior to development.

JavaScript Animation

Courses can use scripted animation using the GreenSock Animation Package (GSAP). GSAP allows us to create complex animations using a programmatic timeline and some limited motion paths. While the standard CSS Transformations can only make linear, stacked transformations (properties are altered along the same timeline, with the same duration), GSAP can apply transformations non-linearly, allowing for complex animation.

Covering what GSAP can do is far beyond the scope of this documentation. Browse the published examples on greensock.com for ideas. Use the examples for inspiration, but keep in mind that many of the examples are not accessible.

JavaScript Animation is time-consuming work. Because of this, any JS animation must be requested and finalized prior to development.

Video

Some animations that require complex detail, paths or voice overs cannot be built using scripted animation. In these instances, it’s best to use video. Traditional Flash animation can be exported and altered in After Effects and output as an MP4.

Before choosing video as the animation medium, ensure that the platform and audience can utilize streaming (for instance, OU’s On-Point cannot) and that the animation has an audio track, including with voice over narration.

No Silent Video will be allowed.

Video animation must be discussed prior to development, and the creation timeline and details cleared with both development and art. Video should never be created until after a course theme has been finalized.