ScrollMotion - A simple library for scroll animations_

<body>
  <div class="container">
    <p data-sm="right blur once">Hello world...</p>
    <p data-sm="up zoom">That's my first library!</p>
  </div>
</body>

<body>
  <div class="container">
    <p data-sm="right blur">Hi...</p>
    <p data-sm="up zoom">What's up?</p>
  </div>
</body>

Showcase

Default Animation

Apply this default fade-in animation by adding the data-sm attribute

<div data-sm=""></div>

    <!-- OR -->

<div data-sm></div>

Adding a Transition

You can add a transition effect by adding "up", "down", "left" or "right" inside the data-sm

<div data-sm="left"></div>

<div data-sm="up"></div>

Zoom Effect

By adding "zoom" to the attribute, you can apply a zoom effect to your element

<div data-sm="zoom"></div>

<div data-sm="zoom right"></div>

One-Time Animation

Add "once" to the attribute if you want the animation to run only once

<div data-sm="once"></div>

<div data-sm="once down"></div>

More Examples

You can combine multiple animations as long as they function properly

<div data-sm="left blur"></div>

<div data-sm="zoom blur"></div>