{"id":21510618,"url":"https://github.com/svinkle/togglific","last_synced_at":"2025-04-09T17:32:17.566Z","repository":{"id":57377685,"uuid":"168841648","full_name":"svinkle/togglific","owner":"svinkle","description":"Do you find web animations distracting? Togglific provides a distraction-free web experience!","archived":false,"fork":false,"pushed_at":"2019-07-27T21:31:41.000Z","size":18512,"stargazers_count":22,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T14:58:36.687Z","etag":null,"topics":["a11y","accessibility","animation","bookmarklet","browser-extension","css","gif","javascript","jquery","svg","toggle","video","webp","webpack"],"latest_commit_sha":null,"homepage":"https://svinkle.github.io/togglific","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/svinkle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-02T14:46:12.000Z","updated_at":"2024-12-12T02:54:55.000Z","dependencies_parsed_at":"2022-09-26T16:41:53.894Z","dependency_job_id":null,"html_url":"https://github.com/svinkle/togglific","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svinkle%2Ftogglific","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svinkle%2Ftogglific/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svinkle%2Ftogglific/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svinkle%2Ftogglific/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svinkle","download_url":"https://codeload.github.com/svinkle/togglific/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248077476,"owners_count":21043971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","animation","bookmarklet","browser-extension","css","gif","javascript","jquery","svg","toggle","video","webp","webpack"],"created_at":"2024-11-23T21:49:35.499Z","updated_at":"2025-04-09T17:32:17.460Z","avatar_url":"https://github.com/svinkle.png","language":"HTML","readme":"[![Build Status](https://travis-ci.org/svinkle/togglific.svg?branch=master)](https://travis-ci.org/svinkle/togglific)\n[![npm version](https://badge.fury.io/js/togglific.svg)](https://badge.fury.io/js/togglific)\n\n# Togglific\n\n\u003e Enjoy a distraction-free web experience!\n\nToggle web animations on or off; for people with [vestibular disorders](https://a11yproject.com/posts/understanding-vestibular-disorders/), who are prone to motion sickness, or who find animations distracting!\n\n## Features\n\nThe following animated elements will _paused_ on button click:\n\n- CSS Animations (`animation` and `transform` properties)\n- JavaScript Animations (`requestAnimationFrame()` method)\n- SVG animations\n- jQuery animations\n- Animated `.gif` and `.webp` images\n- HTML `\u003cvideo\u003e` elements\n- Targets same-domain `\u003ciframe\u003e` elements for all of the above\n\n## Demo\n\nCheck out the [demo section](https://svinkle.github.io/togglific#demos) to see Togglific in action!\n\n---\n\n## Products\n\nTogglific generates three separate products:\n\n1. **Stand-alone script**: For development teams to implement into their own projects and setup custom controls. This covers all animations.\n\n   See the [script options](#script-options) for more details on how to customize for your own needs!\n\n2. **Bookmarklet**: For anyone wishing to quickly pause animations on the current page their viewing.\n\n   The bookmarklet also covers all animations and has the greatest browser support.\n\n   **Note:** State does not persist; the user needs to click the bookmarklet control on each page load to pause animations.\n\n3. **Browser extension**: Available for [Chrome](https://chrome.google.com/webstore/detail/togglific/nonnndpheabjkjjnjondfcfgcmhfbckb) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/togglific/).\n\n   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.\n\n   **Note:** At this time, the extension does not toggle JavaScript based animations due to technical limitations.\n\nLet's look at each in more detail:\n\n### Stand-alone script\n\n#### Usage\n\n1. Include the lib at the bottom of your page:\n\n```html\n\u003cscript src=\"dist/stand-alone/togglific.js\"\u003e\u003c/script\u003e\n```\n\n2. Create a `new` instance and supply the `id` of your toggle button:\n\n```html\n\u003cscript\u003e\n  new Togglific.Togglific([options], 'toggler');\n\u003c/script\u003e\n```\n\nSee [script options](#script-options) for more info on the `[options]` parameter.\n\n3. Add the toggle button to your HTML:\n\n```html\n\u003cbutton id=\"toggler\"\u003eToggle Animations!\u003c/button\u003e\n```\n\n#### npm Package\n\nYou can also grab the stand-alone script and include it into your project via `npm`!\n\n##### Installation\n\n```sh\nnpm install togglific\n```\n\n##### Usage\n\n1. In your JavaScript file…\n\n```javascript\nconst toggler = require('togglific');\n// …\nnew toggler.Togglific([options], 'toggler');\n```\n\n2. Then add a `\u003cbutton\u003e` element as a toggle.\n\n```html\n\u003cbutton id=\"toggler\"\u003eToggle Animations!\u003c/button\u003e\n```\n\n#### Bookmarklet\n\nSimply drag the [Bookmarklet!](https://svinkle.github.io/togglific#bookmarklet) link to your bookmarks bar in your browser and you're all set!\n\n### Browser extensions\n\nInstall the browser extension from one the following browser vendor plugin repositories!\n\n#### Chrome\n\nInstall the browser extension from the [Chrome Web Store](https://chrome.google.com/webstore/detail/togglific/nonnndpheabjkjjnjondfcfgcmhfbckb)!\n\n#### Firefox\n\nInstall the browser extension from [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/togglific/)!\n\n#### Edge\n\n~~Install the browser extension from the [Microsoft Store](https://www.microsoft.com/en-us/store/collections/edgeextensions/pc)!~~\n\nComing soon!\n\n---\n\n## Script Options\n\nThe stand-alone script accepts options when using the script on your page or website.\n\nOptions are sent in the format of an object literal to the `Togglific` instance as the first parameter.\n\nThere are a few things you can set for options, including:\n\n### Custom CSS\n\nIf you want to customize, you can pass specific CSS to the `object`. By default, this CSS would be applied to all elements:\n\n```javascript\nnew Togglific.Togglific(\n  {\n    css: {\n      height: 'auto',\n      padding: '10px'\n    }\n  },\n  'toggler'\n);\n```\n\n### Specify your own selectors\n\nIf you want only specific elements to be effected, you can add CSS selectors as a string:\n\n```javascript\nnew Togglific.Togglific(\n  {\n    selectors: 'section, .content'\n  },\n  'toggler'\n);\n```\n\nCombine both options, _Custom CSS_ and _Specify your own Selectors_ to have specific elements only be effected with the desired CSS.\n\n### Exclude modules\n\nBy 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_.\n\nFor example, to exempt CSS and jQuery:\n\n```javascript\nnew Togglific.Togglific(\n  {\n    modules: {\n      css: false,\n      jquery: false\n    }\n  },\n  'toggler'\n);\n```\n\n### Default options\n\nTo leave everything _as-is_ and accept all components, set the instance `[options]` parameter to `null`.\n\n```javascript\nnew Togglific.Togglific(null, 'toggler');\n```\n\n---\n\n## Contributing\n\nContributions are always welcome! Please read the [Contributing](CONTRIBUTING.md) document if you'd like to help out with the project.\n\n## License\n\nThis project and its source code is licensed under the [MIT](LICENSE.txt) license.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvinkle%2Ftogglific","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvinkle%2Ftogglific","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvinkle%2Ftogglific/lists"}