May 29, 2024 • 3 min read

Lightweight Scrolling Animations

Introduction

Anytime you find yourself writing the same code over and over again, it’s time to organize and make a little snippet or reusable library for yourself.

That was the case for me recently as I was rewriting scrolling animations from scratch one too many times. So, I decided to build a little vanilla CSS and JavaScript library (LSA) to handle these animations for me.

What is LSA?

LSA, or “Lightweight Scrolling Animations”, is intentionally bare bones so you can grab what you need and leave the rest. The benefit of writing this in vanilla CSS and JS is the ability to copy and paste the code directly into your web projects.

Once there is universal browser support, I plan to rewrite this using CSS-only scroll-driven animations. For now, we just need a little JavaScript to handle the scroll events.

I’ll go over a couple of cool examples here. If you’re ready to dive in for yourself, head to the GitHub repo for full instructions on how to get started and you can check out the demo site for all working examples.

Inspiration

Scrolling animations are a great way to add a bit of liveliness to your websites or web apps. As the user scrolls down the page, elements can fade or slide in from any direction, making their experience more enjoyable and drawing attention to important content on the page.

However, it’s easy to overdo animations, which can have a negative effect on user experience.

LSA defaults to very subtle transitions, but you can customize everything to your liking.

For example, if we set an element to have a slide-up effect, the user will see it animate as it enters their viewport.

(Note: these examples look a little different than the demo site as I am using some fancy Tailwind styles here, but like I said, everything is customizable!)

<div class="lsa lsa-slide-up">
  <h3>Slide Up</h3>
</div>

Or, maybe you have a list of blog post cards and would like to have them alternate sliding in left and right as you scroll down the page.

<div class="lsa lsa-slide-left">
  <h3>Slide Left</h3>
</div>

<div class="lsa lsa-slide-right">
  <h3>Slide Right</h3>
</div>

You can also animate elements diagonally. Here are a couple of examples with the lsa-slide-up-left and lsa-slide-up-right classes.

<div class="lsa lsa-slide-up-left">
  <h3>Slide Up Left</h3>
</div>

<div class="lsa lsa-slide-up-right">
  <h3>Slide Up Right</h3>
</div>

Customization

As you can imagine, there are plenty of other transitions we could extend this library with (scale, brightness, blur, etc.), so feel free to let your imagination run wild!

LSA shines as a simple drop-in for your projects but because this is code you own, you can add any amount of complexity you desire.

Conclusion

You can see all working examples at the full LSA demo here and if you would like a guide on how to get started, check out the GitHub repo.

This is a work in progress and more will be added over time. Contributions are more than welcome, enjoy!