Motionrack NPM

Motionrack

Downloads

Description

Motionrack is a free and open source JavaScript library for React, Vue, Angular and Svelte about 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.

Release-notes

Version 1.0.0-alpha.2

Major Changes:

Two syntax tags data-motion-hold & data-motion-release
Can set any time duration or delay for animations

Minor Changes:

zoomIn renamed into expand

Patch changes:

Add docs for speed

Installation

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

npm install motionrack

Features

Compatible for React, Vue, Angular and Svelte
Supports TypeScript

name of animations	default syntax	syntax with time duration	animation effect
`motionUp`	data-motion-hold="motionUp"	data-motion-hold="motionUp 5s"	5 seconds one time
`motionUp`	data-motion-release="motionUp"	data-motion-release="motionUp 5s"	5 seconds continue if appeared while scrolling

You can set any number for Time Duration

time syntax	value	speed
0.1s	0.1 seconds	superfast
0.2s	0.2 seconds
0.3s	0.3 seconds
0.4s	0.4 seconds
0.5s	0.5 seconds	semi-fast
0.6s	0.6 seconds
0.7s	0.7 seconds
0.8s	0.8 seconds
0.9s	0.9 seconds	fast
1s	1 seconds	moderate
2s	2 seconds
2.5s	2.5 seconds	default
3s	3 seconds	slow
4s	4 seconds	delay
5s	5 seconds	super-delay

expand, 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

Sample

Sample website that used Motionrack

energize-coffee-house

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-motion-hold="expand 0.4s">
        expand 
      </div>
    </div>
  );
};

Tailwind

import { 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-motion-release="expand 4s">
        expand 
      </div>
    </div>
  );
};

Bulma

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

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

  return (
    <div>
      <div className="box has-background-primary has-text-white p-4" data-motion-release="expand">
        expand
      </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-motion-hold="expand 0.9s" style={{backgroundColor: 'gray'}}>
          expand 
             </div>
        </div>
        <div className="duoPad">
          <div className="duoBox" data-motion-release="motionLeft" style={{backgroundColor: 'gray'}}>
            motionLeft
          </div>
          <div className="duoBox" data-motion-hold="motionRight" style={{backgroundColor: 'gray'}}>
            motionRight
          </div>
        </div>
        <div className="monoPad">
          <div className="monoBox" data-motion-release="motionDown" style={{backgroundColor: 'gray'}}>
            motionDown</div>
        </div>
        <div className="duoPad">
          <div className="duoBox" data-motion-release="flipUp" style={{backgroundColor: 'gray'}}>
            flipUp
          </div>
          <div className="duoBox" data-motion-release="flipDown" style={{backgroundColor: 'gray'}}>
            flipDown</div>
        </div>
        <div className="trioPad">
          
          <div className="trioBox" data-motion-release="flipLeft" style={{backgroundColor: 'gray'}}>
            flipLeft
          </div>
          <div className="trioBox" data-motion-release="fadeIn" style={{backgroundColor: 'gray'}}>
            fadeIn</div>
          <div className="trioBox" data-motion-release="flipRight" style={{backgroundColor: 'gray'}}>
            flipRight</div>
        </div>
      </div>
   
    </div>
  );
};