How to add scroll animations to my site

I’ve haven’t coded my site yet, but I’d like to know to how to add cool scrolling animations to my site.

1 Like

You can use a library, there is tons of libraries for scrolling animations, like AOS. The downside is that the library hans’t been touch in ages, but it will still do the job.

Or, you can make your own scrolling animation with javascript
Like a simple one:

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $('.element').animate({opacity: 1}, 1000); // here u animate the element

if possible, could you explain the basics of using scroll animations in libraires such as AOS? I tried to use GASP once but It would not work.

Oh sure, no problem.

First thing is that you need to include the library in your project. You can do this either by downloading the library or by including it from a CDN.

Like this:

  <!-- This is like the AOS CSS -->
  <link href="" rel="stylesheet">
  <!-- And the AOS javascript -->
  <script src=""></script>

And, after including the library, you need to initialize it using AOS.init();
Usually in the bottom of the body tag


After that you just need to add data-aos to your HTML element, for example:

<div data-aos="fade-up">
  This will make the text fade in and move up as it's scrolled down.

<div data-aos="zoom-in">
  And this will make the text zoom in.

You can see plenty of examples in their documentation (btw it’s still is one of the most amusing docs I’ve seen): AOS - Animate on scroll library


Is only the JS required for the scroll animations or should I also import the CSS too?

1 Like

Both are required. If you only include the JavaScript file, the library can still add and remove classes, but the browser won’t know what to do with those classes, so you won’t see any animations.

1 Like

Got it. Could I invite you to my repl so that it is easier?

Sure, no problem! I’m heading out for lunch now, but I’ll look later when I have some time.

I think there is also a CSS event like :onScroll or :onVisible or something like that.


Ok! Just invited you. I won’t be active for quite a while so sorry if I’m AFK when you return! Also thanks for all the help!

Good to know – I’ll investigate that later.

1 Like

Thanks for the help with AOS! it’s very simple and easy-to-use!

1 Like

@WindLother I just added a on-load animation (not with AOS) and I was wondering if you could assist me with that too (the form is located here! Thank you so much for the help!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.