How to add scroll animations to my site

Code Help HTML/CSS/JS
1

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
2

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
    }
});
3 Likes
3

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.

4

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:

<head>
  <!-- This is like the AOS CSS -->
  <link href="https://cdn.rawgit.com/michalsnik/aos/2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body>
  <!-- And the AOS javascript -->
  <script src="https://cdn.rawgit.com/michalsnik/aos/2.3.1/dist/aos.js"></script>
</body>

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

<script>
  AOS.init();
</script>

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>

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

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

6 Likes
5

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

1 Like
6

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
7

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

8

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

9

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

2 Likes
10

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!

11

Good to know – I’ll investigate that later.

1 Like
12

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

1 Like
13

@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
14

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