Small Animation Tool For X & Y Transforms – Scroll Motion

Category: Animation , Javascript | June 5, 2018
Author: whiteboxpub
Views Total: 630
Official Page: Go to website
Last Update: June 5, 2018
License: MIT

Preview:

Small Animation Tool For X & Y Transforms – Scroll Motion

Description:

Scroll Motion is a small animation tool for X & Y Transforms that makes use of Intersection Observer and requestAnimationFrame API to animate elements on scroll.

How to use it:

Load the IntersectionObserver polyfill for those browsers that don’t support the native IntersectionObserver API.

<script src="intersection-observer.js"></script>

Load the Scroll Motion’s library at the end of the document.

<script src="scroll_motion.js"></script>

Initialize the Scroll Motion library.

new ScrollMotion()

Add the following classes and attributes to the element you want to animate.

  • scroll-motion
  • data-speed-y
  • data-speed-x
<div class="scroll-motion" data-speed-y="-2" data-speed-x="0">element</div>

Possible options to customize the library.

new ScrollMotion('.scroll-motion', {
    speedX: false,
    speedY: -2,
    observe: 1,
    visibleAmount: 0
})

You Might Be Interested In:


Leave a Reply