Home animations

Turn off the animations on this page

A flashing headline or a panel that slides in every time you scroll can interrupt your reading. This shortcut stops those visual effects on the open page.

On a computer, drag the button below to your bookmarks bar. Then open the page you want and use the bookmark.

Turn animations off on this page

On a phone or without a bookmarks bar? See the other ways to use this shortcut below.

How it works and when to use it

How can I use this shortcut on my phone?

On a phone, you can try saving the code as a bookmark address. Copy the code below first.

iPhone (Safari): bookmark any page, touch and hold the bookmark, choose Edit, and replace its address with the copied code.

Android (Chrome): bookmark a page. Open Bookmarks, tap the three dots beside it, choose Edit, and replace its address with the copied code.

Then open the page you want to change and use the bookmark. If it does not run from the bookmarks menu, type the bookmark's name in the address bar and select its suggestion.

Bookmark address

javascript:void(function(){var id="disable-page-animations";if(document.getElementById(id))return;var s=document.createElement("style");s.id=id;s.textContent="*,*::before,*::after{animation:none!important;transition:none!important}";(document.head||document.documentElement).appendChild(s);}())

Support varies by browser and version. Some websites also block this kind of shortcut.

Another iPhone option: the Shortcuts app

In Shortcuts, create a shortcut with the Run JavaScript on Webpage action and paste the code below. Show it in the Share Sheet for Safari webpages. If prompted, allow running scripts in Shortcuts settings. Then open the page in Safari, tap Share, and choose your shortcut.

Code for the Shortcuts app

void(function(){var id="disable-page-animations";if(document.getElementById(id))return;var s=document.createElement("style");s.id=id;s.textContent="*,*::before,*::after{animation:none!important;transition:none!important}";(document.head||document.documentElement).appendChild(s);}());completion();

How can I use the console on a computer?

Open the page you want to change. In Chrome, press Ctrl + Shift + J (Windows/Linux) or ⌘ + Option + J (Mac), paste the code below into the console, and press Enter.

Console code

void(function(){var id="disable-page-animations";if(document.getElementById(id))return;var s=document.createElement("style");s.id=id;s.textContent="*,*::before,*::after{animation:none!important;transition:none!important}";(document.head||document.documentElement).appendChild(s);}())

The effect applies to the open page. Check what any code does before running it in the console; your browser may show a security warning.

The rule asks for animation: none and transition: none on everything, including what the page draws before and after each box. The site does not change. Only your screen does.

What stops when you use this shortcut?

The button adds a style rule to the open page. It applies to every element.

The rule is animation: none and transition: none. What moved, grew, or changed color little by little stays still.

If the rule is already on the page, a second click does not stack another. After a reload, the site returns to its usual motion.

How to keep it and use it

Drag the button to the bookmarks bar. Open the page that moves too much and click the bookmark.

The bookmark stays in the browser. Each page you click it on receives the rule again, until you reload.

What still moves

Video, audio, and scrolling continue. What stops is the visual animation and transition.

Other people see the site as it is. The change does not leave your browser.