How To Pause A Gif Animation On Mouseover
Acquire how to pause a GIF & play using the freezeframe.js library — a JS library that pauses animated .gifs and enables them on command. Command GIFs with mouse hovers, clicks, touch events or trigger and release functions.
What is a GIF? A GIF or Graphics Interchange Format is a bitmap prototype format — frequently used for animated raster graphics — that was developed past a team at the online services provider CompuServe led past American computer scientist Steve Wilhite on June 15, 1987.
How to Interruption a GIF using freezeframe.js
Controlling a GIF like you would a video isn't as piece of cake every bit a click of the mouse — until at present. Introducing freezeframe.js. A lite-weight JS library that uses canvas to mimic the functionality videos have, pausing and playing.
Freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / impact issue, or triggered manually.
With this JS library, yous'll know how to intermission a GIF by writing its information to a sheet element — automatically. Only the first frame of the animation can be written to canvas, which results in a frozen version of the gif. Now you can control the blitheness a frame at a time using mouse events or manual triggers.
Not a fan of the JS solution? You can as well mimic the pausing and playing GIFs with merely CSS or even improve, an accessible way using the summary/details element.
Installing freezeframe.js
To get started, you'll demand to install the freezeframe.js library on your app. If your project supports ES6 modules or commonjs modules, install via npm or yarn:
Install with npm:
npm install freezeframe Install with yarn:
yarn add freezeframe Or link straight to information technology using the CDN version:
For rapid development, freezeframe.js offers a CDN version that you can load to avoid having to install straight on your awarding
<script src = "https://unpkg.com/freezeframe/dist/freezeframe.min.js" > </script > Setting Up freezeframe.js
Now the fun function. Once you've got freezeframe.js installed, it'due south time to start controlling the GIF. Hither's how you can pause a GIF then play on control — just add the freezeframe class (or a custom selector) to the GIFs yous'd like command over. It's that piece of cake!
<img class = "freezeframe" src = "image.gif" /> That's it! Now yous know how to suspension a GIF and then play on control with a simple, low-cal-weight JS library.
Now let's dig a little deeper on how to suspension a GIF using multiple GIFs and advanced configuration.
Multiple GIFs in a unmarried container?
It'southward as well possible to put the freezeframe grade on a parent element containing as many GIFs every bit you desire:
<div class = "freezeframe" > <img src = "image1.gif" /> <img src = "image2.gif" /> <img src = "image3.gif" /> </div > Need more advanced configuration? freezeframe.js besides exposes public methods to allow for more than custom integration.
Advanced freezeframe.js Usage
Let's go over how to interruption a GIF so play with freezeframe.js public methods. These methods allow y'all the ability to manually control when freezeframe triggers images, adds support elements, and attaches upshot handlers. You tin can as well manually trigger and release animation on one image or a group of images.
Here's an example of how to interruption GIFs then play them using it's methods:
// setup freezeframe case with custom selector and options const logo = new Freezeframe ( '#logo' , { trigger: imitation } ) ; logo. start ( ) ; // offset blitheness logo. stop ( ) ; // stop animation logo. toggle ( ) ; // toggle animation freezeframe.js Options
Cheque out the available public methods below on how to intermission a GIF, then play as needed:
selector
Type: string | DOM object
Default: ".freezeframe"
The selector used to search for .gifs to freeze. Selector may either be passed every bit the first statement of the Freezeframe constructor, or every bit a property of the options object. Yous may pass a string selector or a DOM reference. If a cord is passed, nosotros use querySelectorAll.
trigger
Type: string | boolean
Default: "hover"
Options: "hover", "click", false
The trigger event to start animation for not-touch devices.
overlay
Type: boolean
Default: false
Whether or non to display a play icon on superlative of the paused image.
responsive
Type: boolean
Default: true
Whether or not to make the paradigm responsive (100% width)
warnings
Type: boolean
Default: truthful
Whether or not to console.warn if image doesn't appear to be a gif. When using gifs that don't stop in .gif, or blithe pngs, you may desire to disable these.
freezeframe.js Methods
first()
Start blitheness, or restarts animation from the beginning frame if the .gif is already animative.
// first, save a reference to your freezeframe instance const ff = new Freezeframe ( { trigger: imitation } ) ; ff. starting time ( ) ; end()
How to pause a GIF animation.
ff. stop ( ) ; toggle()
How to pause a GIF & play toggling based on its current state.
ff. toggle ( ) ; on(event, callback)
Add event listeners to a freezeframe instance.
- outcome
type: string
options: start|cease|toggle - callback
blazon: function
params:-
items: assortment| freezeframe -
isPlaying: boolean
-
An instance of how to break a GIF then play while listening for events:
ff. on ( 'start' , ( items ) => { // do something on outset } ; ff. on ( 'stop' , ( items ) => { // do something on stop } ; ff. on ( 'toggle' , ( items, isPlaying ) => { if (isPlaying) { // exercise something on start } else { // do something on stop } } ; destroy
Removes all effect listeners, but leaves DOM intact. Use if you lot are concerned virtually memory leaks on your consequence listeners.
ff. destroy ( ) ; How you know how to pause a GIF & play on control, what are yous going to build with it?
Now that you know how to suspension a GIF and play on command with the freezeframe.js library — what are you lot going to build with information technology? Comment below with how you used this light-weight library to enhance you applications UX.
Source: https://www.benmarshall.me/how-to-pause-a-gif/
Posted by: robertsrabing.blogspot.com
0 Response to "How To Pause A Gif Animation On Mouseover"
Post a Comment