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!
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.
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;" />
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.
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. :)
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?
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?
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.