SCROLL EFFECTS IN PLAIN CSS ! 🤯

#webdev #beginners #javascript #css

Ok, Today we are going discuss about an awesome feature in CSS that's going to blow your mind. Look at the demo down below

Guy's believe me that's plain css. Today, in this post I will share you the steps to achieve the above animation on scroll. 👍

Guys, I presently have only 1 follower on codepen. Make sure to follow me on codepen for live demos and amazing tricks 😆

I also started a daily.dev squad, make sure to join it for complete updates.

Basic setup

First of all let me make it clear that I have two divs each with a h1 in it. Each h1 has a Poppins font and is centred using the flex method. I have nothing more inside the template we are starting with.

Animation

Here is when things get started. Before getting the h1 animated on scroll, we need to animate in general. Make an animation using the @keyframes property. In my case I made the following simple animation

@keyframes revealing {
  from {
    color: gray;
    margin-left: 100vw;
    filter: blur(50px);
    opacity: 0.5;
  }
  to {
    margin: 0px;
    filter: blur(0px);
    opacity: 1;
  }
}

Now give the h1 the animation. But remember one thing. Do not mention the time. Ok 👍

Give the animation like this

 animation: revealing;

Animation Timeline

Using, the animation timeline property we specify when the animation reaches a certain stage.

Note: This is just an experimental feature

In our case it is when the certain element comes into view, So specify the following property to apply the timeline

animation-timeline: view(block);

Now, the animation will start working but It does not seem complete

Animation Range

Animation range specifies when the animation startes and completes in the perspective of viewport. View port in the sense how much of it is covered, contained or anything like that. Ok !

You can specify this like this

animation-range: cover 0% cover 50%;

It means it should start when the element is covered is covered 0% and end when the element is covered 50%.

In case if you are not good in math or cannot understand this topic. Scroll driven animations website will help you out. They have a tool that will help you visualize this animation range. I will provide the link below.

Congratulations 🎉

Well, you completed the animation. See, how simple this is than Javascript libraries like GSAP, or anything else. This helps you complete the job in just 3 lines. Bye 👋

Last Note

Guys I started the following blogging accounts, stay tuned in them cause I'll give you news, tool updates and a lot more of em. In case you can't follow all of them. You will get daily updates will get in daily.dev. Join daily.dev now ⚡. Next, check out my website it just hit version 2.3, Check out citeal now and Codepen