Scroll-based Animations for WordPress (A lightweight, CSS-only solution! No Plugins or JavaScript!)

Recently my CSS Hero, Kevin Powell, did a video on CSS-only scroll-based animations. He, of course, goes deep into how these animations work and shows you all kinds of different ways you can use them.

But being the simple man that I am, what I really wanted was to have just a simple utility class I could use to make objects on my website fade in and up when they come into the viewport.

So, I took what I learned from Kevin, played with the code a bit, and came up with a pretty simple CSS-only animation that achieves this effect.

In this video, I'm going to show you how to set it up and explain how all the code works (including a quick introduction to keyframe animations).

If these types of subtle animations are something you'd like to be able to easily add to your websites, then stick around, and let's get started!
---

👏 COMMUNITY

(voted best WordPress community!):

🔴 EVENTS

🎁 PRODUCTS

📨 NEWSLETTER

🤖 MISC

[adamwrightdesign]

Super cool effect! And great addition there at the end for accessibility — learned something new 🙂

[Portmacquarieonlinemarketing]

Great video as usual, Kyle -- just one point -- you are NOT 'a simple man', you are a SMART man who uses simple solutions! Subtle, but very important dfifference! :-)

[Jim.Hummel]

Wicked cool...A neat animation but what makes it elegant is the media query!

[dennis_woo]

Thanks for making this tutorial. It's something that I was looking for as a no plugins or javascript solution to my wordpress website.

[ButterworthR]

Great video! Super simple, to the point, and gives me the confidence to charge ahead. Thanks!

[mashaheet]

I love the last section of your vedio .

[davidz]

I like Generatepress and GenerateBlocks. Do you think this is still top-notch themes and page-building set-up for 2024?

[nahuellion]

thank you, it did work perfectly on my computer, there is only 1 problem... when i look from a mac/ iphone otr Ipad.. the effect does'nt work anymore. do you know why?

[linkwith-ab]

You provide so many useful tips, so grateful! However in this case I don't get the fade in animation to work on tablets or mobile. Is it necessary to add additional css for that functionality?

[sofieneudecker]

Thank you, this is a great video! 🙂
I am a beginner and I could follow the steps easily.

Unfortunately I have problems to apply the code to my page.
Even though it works in the area of customisation, the changes aren't applied to my website.
There are three options for Preprocessor: NONE, LESS or Sass (SCSS Syntax).
Which one should I choose?
Should I choose the option not to use the theme's original CSS?
Should the media width be 400 px?

It would be great if you could help me 🙂

[bluetheredpanda]

Lovely video, Kyle, BUT. You using a space after `0%` and not after `100%` is triggering my OCD so bad 😂😂

On a more serious note, you said you didn't want to add JavaScript to the website. Is that because you're not that proficient with it, or are there other reasons?
I'm asking because for years, I did my best to avoid JS (because it was foreign to me and seemed tedious to learn every time I tried — to be fair I didn't try very hard due to this perception I had)
And then two years ago I found the right book for me to start, and it just clicked!

[stavro]

I dont see what you see when I click on block. I wnt and added the class in "CSS Classess" in edit with elementor but the effect does not work. Can you help with this

[schubertma]

Nice! But not working for mobile devices, right?

[Wirelez]

sigh.... "Purchase the Premium plan to activate CSS customization"