Make your Adapt course fun in five minutes

September 27, 2018

I had a recent project where the client was looking for something that would make the content not only more engaging, but also add a sense of fun. I knew it would be a great project to start using something that I had wanted to try for a long time in a project, CSS animations.

CSS animations are elements on the page that can animate in or out of view. I had previously used this as a design affordance for sidebars that slide in or out of view but it can also be applied to the content itself. The Onscreen feature was recently added to Adapt that enables a block or component to track when it becomes in view of the learner and fire a trigger event. You can use this trigger to make the component slide into view for the learner. Perhaps the best use of it is in this example by Kineo.

The simplest way to add these animations is using this extension created by Deltanet. It allows you apply animations to any element within an Article, Block or Component. There is a variety of types from simple sliding effects to bouncing or rotating ones. I would recommend using the later two sparingly unless you want your course to look like an early 00's Powerpoint presentation!