Pausing Blinkies and Other Moving GIFs — How Is It Done?

[lumiosecity]

Howdy!

I’m currently coping with the fact that I won’t have completed my Small Web September goals by the last check-in (WiFi’s out and won’t be back til October, on account of Recent Weather Events, alas) by compiling resources for when I finally get to crack open a code file again, and I’ve been wondering…

On other people’s personal sites, I keep seeing an option to toggle the movement of blinkies and other decorative GIFs on and off, but when I try to look up how to do it myself, I keep running into dead ends and/or jargon I have no idea how to decipher, and I’m not currently in a position where I can view page sources and poke around the guts to figure it out on my own (technical limitations, alas). I really want to add a toggle like this to my site, because I am in the deeply ironic position of being a photosensitive blinkie collector and it would be incredibly useful.

So far I’ve managed to figure out that it’s probably something to do with JavaScript, but beyond that, I’m lost.

Does anyone have any leads, suggestions, or resources?

Thank you so much in advance. :)

Comments

[erinptah]

Post some links to the sites where you've seen this? (Googling is just giving me a bunch of tutorials for unrelated things.)

[lumiosecity]

I originally saw it on Bechno Kid’s graphics page, and somehow it completely slipped my notice that she has a tutorial on how to implement it on her resource page, so now I kind of feel like a goober!

It’s a neat trick, for sure.

[erinptah]

Ah, awesome!

Used to be, you could just hit ESC and all the gifs would stop. I don't know why that doesn't come standard with browsers anymore.

[alaterdate]

So looking into it, it looks like most people have been using a javascript library (freezeframe.js). I found the main tutorial here bechnokid's tutorial on how to implement freezeframe in a personal site. It's basically calling the library to your site and then telling it what elements to freeze and how using javascript.

And I also found a resource for a way it can be done without the freezeframe.js library at solaria's freezing gifs tutorial. It's just tedious in another way by making static images of each gif and replacing their visibility with javascript.

But both if these sites have the process well documented so even if you're confused by javascript you should be able to at least copy the code and have it work. Try it out when you can get back to coding and hopefully we can help you troubleshhot more if you need :^)

[lumiosecity]

Oh, perfect. I love Bechno Kid’s site, I can’t believe I completely overlooked that tutorial! Thank you so much!

[drack]

i have this on my links page! it's javascript; i used bechnokid's tutorial (linked by alaterdate!), but if i recall correctly something or other didn't work and i had to change something... i forget what though, it was a while ago! so here is just my setup.

put this in the head of your page
<script src="freezeframe.js"></script>

give every animated image the class "animated"

<img class="animated" src="http://imageurl.gif">

put "start" and "stop" buttons on the page

<button class="start">start</button> <button class="stop">stop</button>

put this script on the page (i have it at the bottom before the /body end tag)

<script> const manual = new Freezeframe('.animated', { trigger: false }); document .querySelector('.start') .addEventListener('click', () => { manual.start(); }); document .querySelector('.stop') .addEventListener('click', () => { manual.stop(); }); </script>

[lumiosecity]

Oh, this is rad— thank you!

[enchantedsleeper]

Ooof, really sorry about your wifi troubles - I hope you're staying safe during Weather Events and that the wifi comes back soon!

[lumiosecity]

I’m lucky enough to be safe, thankfully. Last message from the company was putting the estimation for its return sometime Wednesday, so hopefully it won’t be too much longer!

Thank you for the well-wishes, I appreciate them.