Motionrack NPM

Motionrack

Package Size 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.

Frameworks / Libraries	Tested versions
	18 & above
	3 & above
	16 & above
	3 & above

Release-notes

Version 1.0.0-beta.3

Major Changes:

Two syntax tags data-motionrack & data-motionrack-once
Can set any time duration or delay for animations
With demo animations
You can appy to any formats like images, header , paragraph, text, tables, buttons, and etc.

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

Motion Type	default syntax	syntax with time duration	animation effect
`data-motionrack`	data-motionrack="motionUp"	data-motionrack="motionUp 5s"	5 seconds scrolling
`data-motionrack-once`	data-motionrack-once="motionUp"	data-motionrack-once="motionUp 5s"	5 seconds one time animation

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

Demo

Demo Animations

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-once="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-motionrack="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-motionrack="expand">
        expand
      </div>
    </div>
  );
};

Vue

<template>
  <div>
    <div class="btn btn-primary" data-motionrack-once="expand 1.4s">
      expand
    </div>
  </div>
</template>

<script>
import { onMounted } from 'vue';
import { motionRack } from 'motionrack';

export default {
  setup() {
    onMounted(() => {
      motionRack();
    });
  },
};
</script>

Svelte

<script>
  import { onMount } from "svelte";
  import { motionRack } from "motionrack";

  onMount(() => {
    motionRack();
  });
</script>

<div>
  <div class="btn btn-primary" data-motionrack-once="expand 1.4s">
    expand
  </div>
</div>

Angular

import { Component, OnInit } from '@angular/core';
import { motionRack } from 'motionrack';

@Component({
  selector: 'app-example',
  template: `
    <div>
      <div class="btn btn-primary" data-motionrack-once="expand 1.4s">
        expand
      </div>
    </div>
  `,
})
export class ExampleComponent implements OnInit {
  ngOnInit() {
    motionRack();
  }
}

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-once="expand 0.9s" style={{backgroundColor: 'gray'}}>
          expand 
             </div>
        </div>
        <div className="duoPad">
          <div className="duoBox" data-motionrack="motionLeft" style={{backgroundColor: 'gray'}}>
            motionLeft
          </div>
          <div className="duoBox" data-motionrack-once="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>
  );
};