Figma Motion Explorer

Scroll Motion

Small vanilla javascript library for x,y transforms while scrolling

Getting Started

<div class="scroll-motion" data-speed-y="-2">
  Vertical scroll slow
</div>
<div class="scroll-motion" data-speed-y="7">
  Vertical scroll fast
</div>
<div class="rellax" data-speed-x="3">
  Horizontal scroll
</div>

<script src="scroll-motion.js"></script>
<script>
  // Accepts any class name
  var scrollMotion = new ScrollMotion('.scroll-motion');
</script>

<script>
  // Also can pass in optional settings block
  let scrollMotion = new ScrollMotion('.scroll-motion', {
    speedX: -2,
    speedY: 0,
    observe: 1,
  });
  scrollMotion();
</script>

Prerequisites

intersection-observer.js | polyfill

Installing

To get Scroll Motion running on your local machine do the following steps.

git clone https://github.com/whiteboxpub/scroll-motion.git
cd scroll-motion

or

npm install intersection-observer (polyfill)
npm install scroll-motion