Skip to content

How to disable the fade animation

Eduardo Gómez edited this page Dec 25, 2021 · 2 revisions

To disable the fade animation that runs every time you load a page you have to do the following:

Ghost 4.20.x

From Ghost 4.20.0 it's now possible to disable the fade animation from the Site-wide site settings as shown in the next screenshot:

Don't forget to save your changes.

Previous versions

  1. In the Ghost Admin go to the Code injection menu and paste the following code into the box corresponding to the Site Header:
<script>
  const disableFadeAnimation = true
</script>

If you have the search feature enabled, then the code should look like this:

<script>
  const ghostSearchApiKey = 'YOUR_CONTENT_API_KEY_GOES_HERE'
  const disableFadeAnimation = true
</script>
  1. Finally click the Save button and refresh your blog page to see the changes.