Skip to main content

Animations on Homepages

  • November 20, 2021
  • 8 replies
  • 448 views

JZenker
Guide II
Forum|alt.badge.img+2

Got some animations to work via html widgets and gifs. Gifs are limited to 1 loop, so they only play once. Currently have it on our Superadmin dashboard, and thought I’d share

 

 

My screen recorder didn’t capture the frames as high as they actually are, but you get the point!

8 replies

Annarose.Peterson
Hero III
Forum|alt.badge.img+7

That’s so cool!

I have been able to convert GIFs to APNG and pop them into the image widget.  You get multiple loops with that method.  The only limitation is your APNG needs to be relatively short and the image needs to be small, or else is exceeds the image size limit.  


sjennings78
Guide III
Forum|alt.badge.img+7
  • Guide III
  • April 1, 2022

We mostly use Canva to create our GIFs and add them to pages using HTML widgets.  I have not seen where any of ours are being limited to one loop - they continue to loop for as long as you are on the page.  However, we do store our images/GIFs on our own webserver instead of directly uploading into the LMS, and then reference them in the img source, so maybe that is why.  We just use the basic <img> tags like this:

<img src="https://URL_of_our_web_storage_location/filename.gif" alt="" width="100%" style="display:block;margin-left:auto;margin-right:auto;" />

 


Bfarkas
Hero III
Forum|alt.badge.img+6
  • Hero III
  • April 2, 2022

We mostly use Canva to create our GIFs and add them to pages using HTML widgets.  I have not seen where any of ours are being limited to one loop - they continue to loop for as long as you are on the page.  However, we do store our images/GIFs on our own webserver instead of directly uploading into the LMS, and then reference them in the img source, so maybe that is why.  We just use the basic <img> tags like this:

<img src="https://URL_of_our_web_storage_location/filename.gif" alt="" width="100%" style="display:block;margin-left:auto;margin-right:auto;" />

 

Just adding for reference and for others, but I see in the examples at the top the gif is being used to display text, not sure if same in the above image html, but if so it is important to add that text into the alt and/or description tags of the img so that those who use screen readers for a variety of reasons still understand the content of the page as displayed, otherwise it’s as if that content doesn’t exist, it’s generally a rule of thumb nowadays to try to avoid detailed content in images for reasons like this plus it doesn’t allow people to use other browser tools such as translators, spacing/sizing/contrast changing, etc. all useful for users of all types to better understand content. 


kferguson
Helper I
Forum|alt.badge.img
  • Helper I
  • April 18, 2022

Our company too has done some really cool things with the use of .GIF.  Most NLE can create .GIF.  I have used Kapwing.com in the past to create.  Its free for two high quality resolutions downloads per month.  It allows you to create transitions etc.  Typically .GIF are not longer than 30 seconds.  We have ours on a loop with about 4 images that it cycles through with transitions.  All of Docebo Help Files have .GIF used.  We upload ours through the HTLM widget.  Also Snagit can convert .MP4 files into .GIF.  :)  

 

 


Annarose.Peterson
Hero III
Forum|alt.badge.img+7

Our company too has done some really cool things with the use of .GIF.  Most NLE can create .GIF.  I have used Kapwing.com in the past to create.  Its free for two high quality resolutions downloads per month.  It allows you to create transitions etc.  Typically .GIF are not longer than 30 seconds.  We have ours on a loop with about 4 images that it cycles through with transitions.  All of Docebo Help Files have .GIF used.  We upload ours through the HTLM widget.  Also Snagit can convert .MP4 files into .GIF.  :)  

 

 

Are you adding them directly into the image repository of the HTML widget? Or are you hosting the image some where else and linking it with the html widget?


kferguson
Helper I
Forum|alt.badge.img
  • Helper I
  • April 18, 2022

@Annarose.Peterson I am uploading directly into the widget via the image option.


Annarose.Peterson
Hero III
Forum|alt.badge.img+7

@kferguson Oh wow!  I didn’t know that repository supported GIFs! Thanks for sharing!


dklinger
Hero III
Forum|alt.badge.img+11
  • Hero III
  • August 8, 2024

Morning everyone,

As I am going down the rabbit hole this AM - I want to do a subtle animation for one of our HTML widgets.

I know someone is gonna go say “well try it” - but has someone done this recently so I understand the format I should be outputing to?