Let’s Add Scroll Animations To Our WordPress Page

You see those images and text that move on modern web sites and you wondering… ‘Why can I not have that on my modern WordPress website?’. Well luckily through the magic of plugins you can have animations on your website like all the cool kids do.

As you scroll you will see I have added these effects to this page.

From your WordPress dashboard hover “Plugins” then “Add New“.

Add a new plugin to WordPress

Search for something like ‘scroll animations‘. We shall use the plugin, ‘Scroll Triggered Animations‘ then click “Install Now“.

Note: I have not been compensated to use this plugin I have tried and I like. There are are great animation plugins available.

Search install scroll animations WordPress.

Click “Activate“.

Activate scroll plugin wordpress - Best Cheap WordPress Hosting

You will be taken to your Plugins page. Scroll to find the plugin and click “Settings“.

Scroll Triggered Animations Settings pplugin

Under the section “Available for all users” are the animations we can use for free. If you feel they are adequate for your needs then we can stick to the free version of this plugin. However, if you like what you see with the premium effects with speed control & delays, then by all means support the plugin developer and purchase. I would recommend starting with free and see from there.

Let’s see one of these effects in action, we’ll apply fade-in-left effect.

Free Animations - Scroll Triggered Animations

move-in-up, left, right, down
fade-in-up, left, right, down - Just use 'fade-in' if you'd like a static fade

flip-up, left, right, down
bounce-in-up, left, right, down

Let’s head back to our dashboard and click on “Page” or “Post“. Click document you wish to add to then…

  1. Select the block element you want to add the effect to. A grey square will appear around block identifying it as selected.
  2. On the right menu select the “Block” tab.
  3. Under the “Advanced” section (expand by clicking arrow) below the “Additional CSS class(es)” text box add your effect.
  4. Click the “Update” button.
How to add CSS classes in WordPress block editor.

Click “Preview” and watch the magic happen.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *