Togglific supports the following technologies

  • CSS

    CSS properties animation , transition , and transform are "reset" back to a zero state for all elements. This can sometimes be a little destructive…

  • Images

    Images with the .gif and .webp extensions are "paused"; replaced by a still frame image.

  • JavaScript

    For JavaScript animations, the requestAnimationFrame method is temporarily "removed" from the browser's window object.

  • jQuery

    If jQuery is available, the jQuery.fx method is toggled to "pause" all jQuery animations.

  • SVG

    Yes, SVG can be animated! The SVG dur attribute is detected then temporarily removed from animate and animateMotion elements.

  • Video

    All HTML5 video elements are set to pause ; only previously playing videos are resumed.

Bookmarklet

About

Togglific can be used as a bookmarklet!

Installation

Simply drag this…

Toggle Animations!

…to your bookmarks bar in your browser and you're all set!

Usage

Click the new "Toggle Animations!" bookmarklet in your bookmarks bar to pause web animations on any website!

Note:
The bookmarklet does not persist the toggle state. This means the bookmarklet will need to be clicked on each page load for Togglific to toggle animations.

Bookmarklet Features
Feature Support
Persists Selection No
CSS Yes
Images Yes
JavaScript Yes
jQuery Yes
SVG Yes
Video Yes
Bookmarklet Browser Support
Chrome Edge Firefox IE Safari
Yes No Yes No Yes

npm Package

About

You can also grab Togglific and include it into your project via npm !

Installation

Run the following command to add Togglific as a project dependency: 

                                        npm i togglific

Usage

Add this to your JavaScript file…

                                        const toggler = require('togglific');
                                        // …
                                        new toggler.Togglific([options], 'toggler');

Then add a button element to your HTML as a toggle control. 

                                        button id="toggler"Toggle Animations!/button

That's it!

More Info

Check out the README file on GitHub for more information when using Togglific in your own projects!

npm Package Features
Feature Support
Persists Selection Yes
CSS Yes
Images Yes
JavaScript Yes
jQuery Yes
SVG Yes
Video Yes
npm Package Browser Support
Chrome Edge Firefox IE Safari
Yes Yes Yes No Yes

Browser Extension

About

The Togglific browser extension is available for Google Chrome and Mozilla Firefox !

Installation

Install the browser extension for any of the following browsers:

Google Chrome
Mozilla Firefox

Usage

There are two ways to use the browser extension:

Extension button control

Click the Togglific button in your browser extensions bar to pause web animations on any website!

Keyboard shortcut

Use the keyboard shortcut to quickly toggle animations:

  • macOS: Cmd + Shift + X
  • Windows: Ctrl + Shift + X
Browser Extension Features
Feature Support
Persists Selection Yes
CSS Yes
Images Yes
JavaScript No
jQuery No
SVG Yes
Video Yes
Browser Extension Support
Chrome Edge Firefox IE Safari
Yes No Yes No No

Demos

  • CSS Party Parrot! Featuring CSS @keyframes and transform properties. — Source
  • An animated .gif of The Caped Crusader and The Boy Wonder running from TIE Fighters! — Source
  • Bounce! Featuring CSS @keyframes and animation properties.— Source
  • SVG animation using animateMotion and mpath elements. — Source
  • An HTML video player set to autoplay . Toggling will pause and play the video. — Source
  • A vanilla JavaScript canvas confetti animation. — Source
Toggle Animations!