MotionScroll JS

Congrats! You can now create scroll animations with CSS keyframes easily.

Version 0.1.0

Examples

View on demo

Summary

Create scroll animations easily with just a single line of code by using motionscroll.js.

• Keyframes-like animation
  
• Customize everything with CSS only knowledge
  
• Multiple layers support
  
• Super lightweight, only 4KB
  
• Minimal and ease to use
  

Author

@louisho5

Installation

To include the library in your code:

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

CDN:

<script src="https://cdn.jsdelivr.net/gh/louisho5/MotionScroll@latest/motionscroll.min.js"></script>

Requirements/Browsers

Works in Edge 12+, Chrome 43+, Safari 9+, Firefox 28+.

Code Example

index.html:

<div class="motionscroll">
  <div data-motionscroll-to="transform: rotateY(360deg)">😻</div>
</div>

<script src="motionscroll.min.js"></script>
<script>
    new MotionScroll(".motionscroll");
</script>

Parameters

There are 8 parameters in this library:

new MotionScroll({
  container: ".motionscroll",   // The container trigger
  layer: "[data-motionscroll-to],[data-motionscroll-animate]",   // The scroll animation will be applied to those layer inside the container
  ease: 'linear',   // CSS timing function like linear, ease, ease-in-out, cubic-bezier and etc...'
  offsetTop: 0,   // In "px" unit
  offsetBottom: 0,   // In "px" unit
  reverse: true,    // Reverse playing
  playOnce: false,    // Play only once
  override: false,    // Override all motionscroll styles
});

Functions

There are 2 functions in this library:

var motionScroll = new MotionScroll();

/* Destroy */
motionScroll.destroy();

/* Initialize */
motionScroll.init();

Plans

• Publish library to npm

License

This library is under the MIT license.