motionrack

Motionrack

---

Table of Contents

• Description
• Release Notes
• Sample
• Features
• Installation
• Example

Description

Motionrack is a lightweight JavaScript library designed to simplify web page scrolling by animating elements as they come into view. When elements enter the viewport, making it easy to create engaging and interactive web experiences without the need for complex event handling, mousewheel or extensive JavaScript code.

Release-notes

Version 0.1.1

---

Major Changes:

Minor Changes:

• Docs

Patch changes:

• Fixed the readme docs

Sample

---

Sample website that used Motionrack

energize-coffee-house

Features

• Compatible for React, Vue, Angular and Svelte
• Supports TypeScript

animations	usage	supported tags
motionUp	data-motionrack="motionUp"	img, class, p, header, etc.
motionDown	data-motionrack="motionDown"	img, class, p, header, etc.
motionLeft	data-motionrack="motionLeft"	img, class, p, header, etc.
motionRight	data-motionrack="motionRight"	img, class, p, header, etc.

---

zoomIn, motionUp, motionDown, motionLeft, motionRight
fadeIn, flipUp, flipDown, flipLeft, flipRight
flash, bounceUp| bounceDown, minSpinLeft, minSpinRight
flare, flicker, motionBounce, maxSpinLeft, maxSpinRight

---

Optional layouts

class name to wrap:

motionrack-wrap

---

layouts	quantity	layers
monoPad	monoBox	1
duoPad	duoBox	2
trioPad	trioBox	3

Installation

To install the motionrack, you can use the following npm command:

npm install motionrack

Example

React

Direct method:

applicable for custom CSS, Bootstrap, Tailwind and Bulma

---

• Bootstrap

import { useEffect } from 'react';
import { motionRack } from 'motionrack'; 

export const ExampleComponent = () => {
  useEffect(() => {
    motionRack();
  });

  return (
    <div>
      <div className="btn btn-primary" data-motionrack="zoomIn">
        zoomIn 
      </div>
    </div>
  );
};

• Tailwind

import React, { useEffect } from 'react';
import { motionRack } from 'motionrack'; 

export const ExampleComponent = () => {
  useEffect(() => {
    motionRack();
  });

  return (
    <div>
      <div className="bg-blue-500 text-white px-4 py-2" data-motionrack="zoomIn">
        zoomIn 
      </div>
    </div>
  );
};

---

Layouts method (optional)

import { useEffect } from 'react';
import { motionRack } from 'motionrack'; 

export const ExampleComponent = () => {
  useEffect(() => {
    motionRack();
  });

  return (
    <div>
      <div className="motionrack-wrap">
        <div className="monoPad">
          <div className="monoBox" data-motionrack="zoomIn" style={{backgroundColor: 'gray'}}>
          zoomIn 
             </div>
        </div>
        <div className="duoPad">
          <div className="duoBox" data-motionrack="motionLeft" style={{backgroundColor: 'gray'}}>
            motionLeft
          </div>
          <div className="duoBox" data-motionrack="motionRight" style={{backgroundColor: 'gray'}}>
            motionRight
          </div>
        </div>
        <div className="monoPad">
          <div className="monoBox" data-motionrack="motionDown" style={{backgroundColor: 'gray'}}>
            motionDown</div>
        </div>
        <div className="duoPad">
          <div className="duoBox" data-motionrack="flipUp" style={{backgroundColor: 'gray'}}>
            flipUp
          </div>
          <div className="duoBox" data-motionrack="flipDown" style={{backgroundColor: 'gray'}}>
            flipDown</div>
        </div>
        <div className="trioPad">
          
          <div className="trioBox" data-motionrack="flipLeft" style={{backgroundColor: 'gray'}}>
            flipLeft
          </div>
          <div className="trioBox" data-motionrack="fadeIn" style={{backgroundColor: 'gray'}}>
            fadeIn</div>
          <div className="trioBox" data-motionrack="flipRight" style={{backgroundColor: 'gray'}}>
            flipRight</div>
        </div>
      </div>
   
    </div>
  );
};

License

MIT

---

Author

Demjhon Silver