Use of animated gifs as simulations in e-learning content


Recently the humble gif image file had its 30th birthday. The gif had already been on my mind as our developers had been working on a feature in the content authoring module of our bepoke learning management system (LMS). Instead of resampling all images to be optimal size, the default behaviour, we were identifying images that were animated gifs and leaving them in their original state to preserve the animation.

Although few people use the gif image format for plain images (jpg and png are superior formats) the possibility to easily package multiple similar images together to create an animation means that gifs have never been more popular. Animated gifs are posted by users to sites like imgur, reddit and tumblr and then commented on, using other "reaction" gifs by other users. In reality animated gifs are inefficient (they have large file sizes compared to video) and are difficult to control (i.e. to start and stop on demand) and are silent. Many popular gif sites often convert them to video files on the quiet.

In the post-flash world where e-learning developers are still coming to terms with video, the html5 canvas and html5/css3 animation surely, despite the drawbacks, the simplicity of creation and ease of use of animated gifs in web pages means that there is still a place for gifs in e-learning content. Especially as they can be created by almost anybody; you don't need to be an animator.

Animated gifs are ideal for simulations that are endless loops. Here are a few examples retrieved from a couple of minutes searching on wikipedia:

Brownian motion:


Flow around an airfoil/aerofoil:


2016 Solar Eclipse:


Engine with airflows:


SkillsLogic builds affordable bespoke e-learning content that works across third party learning management systems.

Talk to us today and find out how we can help.

Contact Us

Contact Us

SkillsLogic Ltd,
Cooper Buildings,
Sheffield Technology Park,
Arundel Street,
S1 2NS

+44 (0)114 383 0093

Follow us on Twitter: