Make a GIF your Cursor in Chrome

Chris Hayes — Mon, 04 Apr 2022 23:33:26 +0000

Using "AniTuner" to create a special .ani cursor file and the Chrome extension, "Animated Cursors Forever!". One can use a GIF as their cursor inside Chrome.

Limitations

Windows-only software is used in this guide. Software for building .ani files on other OS's is difficult to find.
This cursor would only show inside websites, not on the Chrome titlebar or outside of Chrome.
This changes the "default" cursor. When websites change the cursor, the animated cursor will be hidden.
The gif needs to be small! The .ani file that gets created needs to be less than 80KB. Larger than that and the browser extension won't work.

Process

Split the GIF into individual images

Download the GIF - choose a small GIF!
Upload the GIF to EZGif's Splitter tool at: https://ezgif.com/split
Hit "Split to Frames" and then "Download frames as ZIP" to get the GIF as individual images. Extract those images into a folder.

Create the .ani cursor file

Install the Window application, AniTuner. Which some consider the best application for creating .ani cursor files.
In AniTuner, hit "Create a new animated cursor"
Then "Edit Cursor Frames" on the left side
Then "Import image(s)" to import the images from that were downloaded from EZGif.
If the image looks good, hit "Okay" on the popup. Might need to select the "transparent" checkbox.
If the "Resize Image" popup shows, select the "Center image in the frame" option and hit "Okay".
Select the blank frame at the top left, and hit "Remove frame(s)".
Hit "Test Cursor" on the left side, to see what the cursor looks like. Hit "Set Length" at the bottom right to change the animation speed.
Finally, hit "Save Animated Cursor.." on the left side when the animation looks good.
Important - check the .ani file that was created is under 80KB. Any larger and it won't work with the browser extension. If it's too large, EZGif can be used to optimize the gif and remove frames. In AniTuner, you can also try different cursor dimensions.

Use the .ani cursor in Chrome

Get the Chrome extension, "Animated Cursors Forever!": https://chrome.google.com/webstore/detail/animated-cursors-forever/glbompdcoknijlagjdallgimohbcopem?hl=en
After clicking on the installed extension, hit the "Choose File" button to upload the .ani cursor file.
If the file isn't too large (less than 80KB), then the next time the website refreshes, it will use the animated cursor. Note that the cursor won't show immediately, you need to refresh the page to see the new cursor.

5 Modern JS Sliders for 2022

Chris Hayes — Sun, 28 Nov 2021 05:19:41 +0000

I find I'm always looking for a new JS slider library for one reason or another. Here's a roughly ordered list of the top libraries that I've come across going into 2022.

SwiperJS

nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions

👍 Very mature project with long-term backing.

👍 Mobile slider experience feels native.

💯 Framework support for React, Vue, Angular, and Svelte.

👎 On the larger side at nearly 40KB.

😕 Browser support limited to latest browsers, exact support not documented.

SplideJS

Splidejs / splide

Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.

👍 Mobile slider experience feels native.

👍 About half the size of SwiperJS.

💯 Framework support for React, Vue, and Svelte.

GlideJS

glidejs / glide

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

👍 Very mature slider library.

👍 Only 7KB

👎 Touch experience suffers. GlideJS ignores user input while mid-transition.

TinySlider

ganlanyuan / tiny-slider

Vanilla javascript slider for all purposes.

👍 Feature rich.

💯 Very good browser support, includes IE 8+.

👎 Project hasn't received any commits in over a year. (As of Dec 2020, last commit was July 2020)

👎 Mobile user experience isn't as good as other libraries. Transitions don't feel as smooth and page vertically scrolls a lot.

Flickity

metafizzy / flickity

🍃 Touch, responsive, flickable carousels

👍 Good mobile experience.

👎 Project hasn't received any commits in nearly a year. (As of Dec 2020, last commit was Jan 2021)

👎 Commercial pricing at $25 per a dev.

FYI - I did not include sliders that require JQuery in my list since I rarely use JQuery and pulling in JQuery for a single component is a deal-breaker. Comment below with your own favorites.

DEV Community: Chris Hayes