Note: Animation used to be applied using animation classes. If you're looking for animation classes, this is the updated version of that feature.
Animations can be added to articles, blocks and components to give them some flare when they appear in your course.
A component using the fade-in animation.
Adding an animation
Open the article, block, or component that you want to add animation to and scroll down to the On screen classes section:
Select your animation from the Animation name dropdown menu:
Then use the following settings to configure your animation:
| Animation delay | The amount of time between the component/article/block appearing onscreen and the animation beginning. |
| Animation repetition | Set the amount of times you would like the animation to run. |
| Animation speed | Define how long the animation will take to complete one cycle. |
To enable your animation, make sure that the Enabled toggle in the On screen classes section is switched on:
Examples of animations
| Bounce | |
| Bounce in | |
| Bounce in Down | |
| Bounce in Left | |
| Bounce in Right | |
| Bounce in Up | |
| Fade in | |
| Fade in Down | |
| Fade in Down Big | |
| Fade in Left | |
| Fade in Left Big | |
| Fade in Right | |
| Fade in Right Big | |
| Fade in Up | |
| Fade in Up Big | |
| Slide in Down | |
| Slide in Left | |
| Slide in Right | |
| Slide in Up | |
| Zoom In | |
| Zoom In Down | |
| Zoom In Left | |
| Zoom In Right | |
| Zoom In Up |