Create Scroll-triggered Animations With JavaScript And CSS3 – MotionScroll

MotionScroll is a lightweight scroll animation library that applies high-performance scroll-triggered animations to elements using CSS properties.

Some options include setting the easing function, offsetting the trigger points, playing in reverse, and more. This makes it flexible enough to achieve a wide variety of effects.

How to use it:

1. Download and load the motionscroll.min.js script in the HTML document.

<script src="motionscroll.min.js"></script>

2. Wrap the target element into the motionscroll container and define the scroll animation using the data-motionscroll-to or data-motionscroll-animate attribute:

<div class="motionscroll">
  <div data-motionscroll-to="transform: rotateY(360deg)">
    Element To Scroll
  </div>
</div>
<!-- OR -->
<div class="motionscroll">
  <div data-motionscroll-animate="20% { opacity:0; } 40% { opacity:1; } 60% { opacity:0; } 80% { opacity:1; } 100% { opacity:0; }">
    Element To Scroll
  </div>
</div>

3. Initialize the MotionScroll and you’re done.

new MotionScroll();

4. Apply the scroll animation to a specific container.

<div class="custom">
  <div data-motionscroll-to="transform: rotateY(360deg)">
    Element To Scroll
  </div>
</div>

new MotionScroll(".custom");
// OR
new MotionScroll({
    container: ".custom",
});

5. Available options to config the scroll animation.

new MotionScroll({
    // apply the scroll animation to these elements...
    layer: "[data-motionscroll-to],[data-motionscroll-animate]",   
    // easing function
    ease: 'linear', 
    // top/bottom offset in px
    offsetTop: 0, 
    offsetBottom: 0,
    // reverse the animation
    reverse: true,
    // play the animation only once
    playOnce: false,
    // add "!important" to all MotionScroll CSS animations
    override: false,
    
});