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“.
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.
Click “Activate“.
You will be taken to your Plugins page. Scroll to find the plugin and click “Settings“.
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.
move-in-up, left, right, down
fade-in-up, left, right, down - Just use 'fade-in' if you'd like a static fadeflip-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…
- Select the block element you want to add the effect to. A grey square will appear around block identifying it as selected.
- On the right menu select the “Block” tab.
- Under the “Advanced” section (expand by clicking arrow) below the “Additional CSS class(es)” text box add your effect.
- Click the “Update” button.
Click “Preview” and watch the magic happen.
