Gif Component

This component is suitable for use when creating accessible courses.

The Gif component is a presentation component that displays a Gif image to the learner.

This article provides an overview of the Gif component, component setup, and behavior.

Component overview

The Gif component presents a Gif image to learners when the Gif component comes into view on a page in an Evolve course. The Gif component can be configured to replay when revisiting the course page.

The Gif component is fully responsive.

Component Set Up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

Add Title, or a Display Title, as needed. Display Title is seen by learners.

Scroll down and add your Body. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the Gif component. This widget can display an icon and label prior to the Gif component completion, which changes to a different icon and label once the Gif component is completed.

Gif section

1. In the Gif section, you select a Gif to display.
2. Enable Set Gif Per Device Size, as needed.
3. Add an Alt Text, as needed.
4. Add Caption to be displayed below the Gif, as needed.

You can also set a Poster Image to display when the Gif animation is stopped. Enable Set Poster Image Per Device Size, as needed.

Note that these settings are only available if Show Gif Controls? is enabled in the Behavior section.

Behavior section

In the Behavior section, toggle Show Gif Controls? to allow the learner to stop or restart the Gif animation via mouse or keyboard navigation.

Enabling this setting also grants access to the Respect Reduced Motion Setting? setting, the Poster Image settings in the Gif section, and the Appearance section settings.

Note: By default, the Show Gif Controls? toggle is disabled.

Toggle Respect Reduced Motion Setting? to make the learner manually start the Gif animation if they have enabled the "reduced motion" setting in their browser or OS.

Appearance section

This section is only available if Show Gif Controls? is enabled in the Behavior section.

Set Gif Control Button Icon Color to your desired color. Select a color from either a hex code Color picker or preset Theme colors.

Set Gif Control Button Icon Size to your desired size.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.