Enjoy a distraction-free web experience!

Toggle web animations on or off; for people with vestibular disorders, who are prone to motion sickness, or who find animations distracting!

The following animated elements will paused on button click:

• CSS Animations (animation and transform properties)
• JavaScript Animations (requestAnimationFrame() method)
• SVG animations
• jQuery animations
• Animated .gif and .webp images
• HTML <video> elements
• Targets same-domain <iframe> elements for all of the above

Check out the demo section to see Togglific in action!

Togglific generates three separate products:

1. Stand-alone script: For development teams to implement into their own projects and setup custom controls. This covers all animations.

   See the script options for more details on how to customize for your own needs!

2. Bookmarklet: For anyone wishing to quickly pause animations on the current page their viewing.

   The bookmarklet also covers all animations and has the greatest browser support.

   Note: State does not persist; the user needs to click the bookmarklet control on each page load to pause animations.

3. Browser extension: Available for Chrome and Firefox.

   With this, localStorage is used to persist the selection. The user only has to click the button once to always disable animations for the current domain.

   Note: At this time, the extension does not toggle JavaScript based animations due to technical limitations.

Let's look at each in more detail:

1. Include the lib at the bottom of your page:

<script src="dist/stand-alone/togglific.js"></script>

2. Create a new instance and supply the id of your toggle button:

<script>
  new Togglific.Togglific([options], 'toggler');
</script>

See script options for more info on the [options] parameter.

3. Add the toggle button to your HTML:

<button id="toggler">Toggle Animations!</button>

You can also grab the stand-alone script and include it into your project via npm!

npm install togglific

1. In your JavaScript file…

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

2. Then add a <button> element as a toggle.

<button id="toggler">Toggle Animations!</button>

Simply drag the Bookmarklet! link to your bookmarks bar in your browser and you're all set!

Install the browser extension from one the following browser vendor plugin repositories!

Install the browser extension from the Chrome Web Store!

Install the browser extension from Firefox Add-ons!

Install the browser extension from the Microsoft Store!

Coming soon!

The stand-alone script accepts options when using the script on your page or website.

Options are sent in the format of an object literal to the Togglific instance as the first parameter.

There are a few things you can set for options, including:

If you want to customize, you can pass specific CSS to the object. By default, this CSS would be applied to all elements:

new Togglific.Togglific(
  {
    css: {
      height: 'auto',
      padding: '10px'
    }
  },
  'toggler'
);

If you want only specific elements to be effected, you can add CSS selectors as a string:

new Togglific.Togglific(
  {
    selectors: 'section, .content'
  },
  'toggler'
);

Combine both options, Custom CSS and Specify your own Selectors to have specific elements only be effected with the desired CSS.

By default, all components are included for toggling animations. If you'd prefer to remove a specific component to always allow animations, you can set it to be excluded.

For example, to exempt CSS and jQuery:

new Togglific.Togglific(
  {
    modules: {
      css: false,
      jquery: false
    }
  },
  'toggler'
);

To leave everything as-is and accept all components, set the instance [options] parameter to null.

new Togglific.Togglific(null, 'toggler');

Contributions are always welcome! Please read the Contributing document if you'd like to help out with the project.

This project and its source code is licensed under the MIT license.