![](https://i0.wp.com/media.dev.to/cdn-cgi/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwgbmeb10ogfen1slgye2.jpg?w=1200&ssl=1)
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
Links 🔗
Scroll driven animation
Daily.dev
Codepen
Citeal
Thanks for reading 😉, Have a great day
Credit: Thumbnail from a video in the channel developedbyed
Discover more from Coursity
Subscribe to get the latest posts sent to your email.