Animate On Scroll With Just 3 LINES Of CSS (No Libraries Needed)

Hi everyone, Snippets Code here
Focus of today’s video is to create this effect, where the elements are being smoothly animated when the page is being scrolled, and various animations are also being applied. All this with 3 simple lines of css.
🔔 Subscribe now
To stay updated on our upcoming design tutorials. Don't forget to hit that notification bell so you never miss a valuable lesson.
Link to code: github.com/SnippetsDevelop/sn...
For Business 💼:
[e-mail]
#htmlcsswebsitedesigntutorial #htmlcsswebsite #htmlcsswebsitedesign #htmlcsswebsitetutorial #htmlcsswebsiteproject #htmlcsswebsiteportfolio #htmlcsswebsitelayout #htmlcsswebsiteresponsive #htmlcsswebsitedesigntutorialvisualstudiocode #htmlcsswebsiteforbeginners #animateonscroll #animation #jsanimation

[@Snippets_Code]

If you find this video valuable then do Like Share Comment and Subscribe to the channel: kzbin.info/door/NWGZXzuU9oGggS2egZiKxA

[@cool5019]

Thanku 🎉

[@lazyjoe597]

So now let's wait another 5 years or so for Apple and Mozilla to implement it into their browsers so we can finally use this feature. Until then good old JS is the only way

[@maestrogoldring1094]

Randomly suggested to me from KZbin. It was a good suggestion. Simple and short explanation, just how I like 👍

[@AestheticalMinimalism]

No JS? You're a bloody genius!

[@nicolasmayorga8288]

00:00 here and trying to sleep and just found this wonder, thanks for this content and the way you explained was amazing. I really appreciate it ❤

[@Fluff-9]

You are amazing. I have been searching the Internet for so long. This video answered all my questions. Thank you.

[@aryanisgood]

I was just making a cafewebsite project and came across this. Gonna use it for the project. Thanks

[@xViiiZe]

One of my favourite channels!!!!!!!!!!

[@boomba118]

i like this approach, straight to the point short video, no bs talking no what is animation no hello welcome to my channel bla bla... awesome :D thank u for great tip

[@jaromanda]

Chrome experimental features should not be used in production

[@faizbyp]

thank you very much! this is exactly what I need

[@SmartC2007]

Very nice and very well explained. Thank you very much.

[@victoriamarchi6973]

Excellent video!! Quite concise and straight to the point :) thank you!! new sub!!

[@minolruckshan5396]

This worked perfectly on project....!!! nice...❤

[@muhammad_zohaib936]

Thanks a lot I needed that kinda explanation appreciated🙏❤

[@towercontrol4450]

The only problem with this aproach is browser support, for animatio-timeline and animation-range is still low

[@Atul_Thakre30]

Thank you so much for this 🔥🔥

[@edsHTML]

i didnt know this. I now learned these css properties 😀😀

[@mudyeet_]

I hope you don't get bothered by the critics, I liked the video, it's 3 lines that are making the difference, if the critics wanna complain, they can try the intersection observer to implement the same thing and come back to say this is verbose or clickbait.

[@MarcosDemian]

Awesome tutorial and to the point. Liked and subscribed

[@thewebstylist]

Amazing!

[@RuTe-tr3bj]

Awesome trick 👏👏

[@user-uc5kl1dw7i]

So cool and easy!

[@RajThakur-ol8mg]

I liked it. I'm looking exact this video 👍💯

[@AhmedHuzain]

Thanks a lot!

[@cwirus99]

In video like this, where cutting edge CSS features are used, you really should mention the browser support, which at this point is not great for on-scroll animations - only Chromium has already implemented it.

[@Snippets_Code]

Sure I will try to mention that in future videos 🙂

[@qewela]

ONLY CHROMIUM? bro almost every browser is built on chromium. but u got a point

[@vosyasabesquien]

@@qewela maybe on desktop. on ios safari does not work

[@cwirus99]

​@@qewela true, but still. Depending on your target market, chromium based browsers usage can be as little as 50%.

[@gabrielvasconcelos2166]

Very nice video! Previously, I activated the animation using JavaScript, with an event listener or the Intersection Observer

[@valentynsjoyjitsu]

Nice idea 👌 thank you 🙏

[@solongdygaming4729]

Thanks you ❤

[@horaciomanuliwd]

Hello GENIUS!!! I want to thank you INFINITELY for providing your knowledge. I ALREADY SUBSCRIBED TO YOUR KZbin CHANNEL, AND I STARTED FOLLOWING YOU ON GITHUB. Greetings from Buenos Aires!!!

[@saranshparashar4257]

Really helpful. Please create more animation videos for css which includes minimum use of js.

[@Iskael]

can not run in Safari and Firefox

[@Snippets_Code]

Yes, It is a new feature of CSS, so has limited availability. Maybe later those browsers will also become compatible

[@aldyreal]

You should notice this in the video btw

[@ishpeeedy]

brilliant !

[@alexcostal3749]

Amazing

[@uifry]

Amazing :)

[@user-jr8zv1oz6d]

merci frr c tres utileee

[@NicMulvaneys]

Nice! 🎉

[@mehdimansouri1547]

fantastic

[@victorcano6066]

nice video bro! 🫶

[@tylerpetrov8094]

Great video! Not sure why everyone is giving you so much trouble about the "3 lines" deal. It seems like 3 line to me, key frames don't count lol. I'll definitely try and implement this in my projects! God bless!

[@MuhammadShoaibOfficial]

Safari and Firefox, both desktop and mobile versions, are not supported.

[@mohaymenul-islam]

awesome

[@ring11037]

'3 lines' seems like a clickbait after all. But this is cool stuff, I'm glad that I clicked. Thanks for sharing.👍

[@kevingonzalocruzmartinez8429]

Wow thanks you bro, the video very short and direct, saludos desde México

[@dominikrodler8010]

sick

[@merlinmeraldz]

nice tip, hopefully firefox and safari support comes fast

[@LedaseLikdsewa]

amazing

[@HamzaAli-rn1cc]

Bro is genious

[@ib4112]

Nice way of doing it. can you also do a video on GSAP animation.

[@Snippets_Code]

Sure 🙂

[@yonatandawit8112]

Nice

[@kellog89]

Very interesting from a technical point of view. However, are animations necessary or even enjoyable from a UX point?

[@itsatomtech]

A fairly new addition... and not standard yet...

[@DANNFIGDESIGNS]

Three lines. 🥳🎉

[@nishantkr5759]

I was searching for this exact css for days You have no idea how much this video means to me 😘 I had to subscribe Btw is this how react loads and unhide contents on scroll ? Or react uses something else ?

[@Snippets_Code]

I think there won't be any change of effect on this with react

[@nishantkr5759]

@@Snippets_Code Yeah but I'm learning react and they say react is fast because it loads only those contents the user views which makes the app faster So is the same as the react thing ?

[@Snippets_Code]

No no, it is isn't that way, the meaning of the statement is that, it loads those components first which are being utilised and remaining can have lazy loading. Anyway once a component is loaded the css gets applied to it, so whenever the component enters the view port, this effect gets applied.

[@nishantkr5759]

@@Snippets_Code 😐 but I've seen way websites where they have this scroll effect and when I incept it then shows react components.. So if this is not the way then how do they achive this load on scroll using react ...?? I'm sorry I might be asking out of context question but I couldn't find the answer on KZbin nor in Chat...

[@Snippets_Code]

Can you share any reference site, so that I can understand, what scroll effects you mean. But at the end, it also depends on the way you use your components, modules you use and mainly on the functionality you want to achieve. 🙂

[@CristianKirk]

Great but beware of browser support.

[@Snippets_Code]

🙂

[@thegabeserna]

cool stuff but it’s not really “in only 3 lines”

[@Tanishkmalviya]

It's 3 lines You just don't know that fact that he used 1 line = 4 lines 😂

[@MauroAmador]

Nice effect, but just compatible in chrome and edge, hope fully compatible

[@saurabhp94]

This is still under development, not supported yet with browser hosting deployed server

[@satwikpanda2469]

if there is any overflow-hidden it won't work instead change it to overflow-clip

[@wlockuz4467]

Is it possible to do it only once? I don't want the reverse animation if I am scrolling up.

[@Snippets_Code]

Maybe that is a little complicated, and you might need to introduce JS to detect backward scroll and pause the animation. But if I find any pure CSS solution, I will surely let you know 🙂

[@upyrov]

this is most likely impossible, you need to have a state. use IntersectionObserver API

[@atharva6738]

The best thing we can use is aos (animation on scroll)

[@shiva_mahto]

That library has not been updated, even touched in 6 years, why would you use a library when you can achieve the same result with plain css.

[@ScientificZoom]

✌️👌✋👌

[@blackpurple9163]

How's the browser support for these?

[@Snippets_Code]

As these are new advanced features of CSS, chrome and edge are currently supporting these. Maybe safari and firefox might become compatible soon

[@blackpurple9163]

@@Snippets_Code doubt about Firefox, I've seen it fall behind a lot compared to it's older days 😔 I prefer FF and this frustrates me a lot

[@usernameusernameusername12]

How do i set it to make the animation dont replay again when i scroll up

[@Snippets_Code]

Currently there isn't anything that could detect backward scroll, and stop animation, in css. You might have to introduce little javascript to detect the backward scroll and pause the animation

[@usernameusernameusername12]

@@Snippets_Code oh ok, thx! Great video 🙂

[@alihamdane]

لماذ لما تستخدم animation timelinr scroll instead of view

[@Snippets_Code]

Scroll means the animation happens when the view port is scrolled, instead of when the elements enter view port

[@foysalahmedmin]

Alhamdulillah.

[@HoyaS2]

Is it possible to do scroll animation just once or is there a way like that? For example, when you scroll up, the animation doesn't work

[@Snippets_Code]

For that thing you might need to introduce little javascript to detect backward scroll and pause the animation, or something like that. 🙂

[@HoyaS2]

@Snippets_Code It can't be controlled only by CSS. Thank you.

[@Snippets_Code]

Currently there is now to detect the scroll direction using the css itself, so it might not be possible with just CSS

[@HoyaS2]

@@Snippets_Code Thank you. I'm glad you subscribed.

[@AshwinSI-px5yo]

Can you provide the full code both html and css

[@Snippets_Code]

I have mentioned the link to the code in description 🙂

[@html86]

How we can add this in react and next js project

[@Snippets_Code]

Just include it as CSS of your project 🙂

[@ujjwalchoudhary7219]

Can i get the css of the all boxes how they arrange?

[@Snippets_Code]

Link to code mentioned in description

[@violonist-pl4tt]

It doesnt playfor me. idk why. My site is a complete portofilo website i wanted to add animation to.

[@Snippets_Code]

These are some new advanced features in CSS, so they have limited availability, currently compatible with chrome and edge

[@violonist-pl4tt]

@Snippets_Code oh, actually I am using Edge. But it was late night when I was trying to code. I will try again tomorrow. Thanks for the easy tuttorial

[@talhasifat15]

Hi, Does it work next. I try doing it, and it works once, and then it's the 2nd day I am trying it but it's not working. I tried doing it with HTML/CSS only then did it work. does anyone have an idea of why it not working with Next?

[@JaskaranSingh-le4tm]

the animation-time and view both are new properties. So these have limited browser compatibility. For ex- These are not supported by FireFox and Safari.

[@BhaktiTone]

Hum na to pagal hain, aur na hamara dimag kharab hai.

[@user-kw1uw5we1e]

it doesn't work with tailwindcss reat.tsx app why ?

[@Snippets_Code]

It will work, with tailwind css, but as these are new features in CSS, just check the compatibility of the browser 🙂

[@satwikpanda2469]

I am facing the same issue were you able to solve it?

[@l.sureshkumar-lsk550]

Share the code pls

[@Snippets_Code]

Sure I will mention the link in description

[@phat80]

It’s useless as it won’t work in safari and firefox!

[@Snippets_Code]

Currently these features are supported in chrome and edge, might be added to safari and firefox later 🙂

[@Param3021]

It's useful if you use the right browser.

[@JakeSavageOpinion]

​@Param3021 I wish you all the best telling your users that

[@sesil2459]

Well, animation-timeline has not really good browsers support...

[@Snippets_Code]

Yeah, currently it is compatible with chrome and edge

[@phat80]

@@Snippets_Codeif it’s not supported at least by Safari you should consider it does not exist.

[@user-ip1rx2vs6j]

Safari does not support this way of scroll-based animation

[@znkdev]

3 lines? you sure you want to make this clickbait?

[@Snippets_Code]

Nope, Not a clickbait, these are some new features in CSS which you can explore 🙂

[@znkdev]

@@Snippets_Code I found it nice, and liked the video, but it is not in 3 lines!

[@user-om1te4qo7k]

​@@Snippets_Code well if you didn't do as thumbnail said ,it's clickbait new feature or not

[@ktldon]

​@@znkdevif you exclude the animation css, it is indeed 3 lines of code. Still pretty simple code anyway

[@xDmtm]

It's 3 lines! animation: ... animation-timeline: ... animation-range: ...

[@YasirJabri]

We definitely need a css library similar to animate.css (or it's js support library wow.js) open source

[@jamworthy14]

ME who just Started WEb development 😮😭

[@amanchoudhary7414]

So what.....? Are u going to panic in this ?

[@jamworthy14]

@@amanchoudhary7414 i feel overwhelmed by this. bro

[@darzhaneduardovich2712]

@@jamworthy14 nah, you should be happy

[@DaMu24]

3 lines? more like 13 lines. Also doesn't work in Firefox, so nice try...

[@Snippets_Code]

Actually I meant that you can make any type of animation happen when scrolled by including those 3 CSS lines only, and I didn't include the CSS of the blocks, text, basic body styling in video, if those were mentioned, it would have been more than 13 lines also 🙂 Not mentioning the support for the advanced CSS feature is a mistake, I will make sure to mention that when required in future videos.

[@diegocamacho6060]

@@Snippets_Code 🤗🤗

[@3litepker]

If it’s not supported on the main browsers then it’s really silly to even entertain this. Until it’s supported it’s trash and has no use in production. 99% of use cases will require all of the main web browsers

[@Snippets_Code]

It is a new feature in CSS, supported in chrome and edge and also fun to use 🙂

[@heartbreaker7021]

diskliked for click bait

[@knowname5354]

Unsupported for production app. Dislike