Reload gif on click

Design help Animations & Interactions
1

Hi,

I am trying to achieve what this page does
http://hongkiat.github.io/gif-onclick/

I followed it’s instruction and setup the data-alt for an image but the script does not swap back the .png.

Maybe this isn’t the best way to achieve something similar and I am all ears. All I want is to be able to play the gif onclick, and when users click again it stops and become a static image. And when it’s clicked again the gif starts from the beginning.

2

I figured out why. Webflow is inserting srcsec for responsive images, hence overwriting the original image. I used ctrl+shift+o on the image to turn it off and the script works fine.

I also made some moderations to the script to not use split() because Webflow doesn’t use relative path for their assets.

This post is now resolved.

2 Likes