motionrack

Motionrack

---

Table of Contents

• Description
• Release Notes
• Installation
• Features
• Sample
• Demo
• React
• Vue
• Angular
• Svelte

Description

Motionrack is a free and open source JavaScript library animated web page scrolling in React, Vue, Angular, and Svelte. 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.1

---

Major Changes:

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

Minor Changes:

• zoomIn renamed into expand

Patch changes:

1.0.1

• Added 5 new animations: pump, slopeUpLeft, slopeUpRight, slopeDownLeft, and slopeDownRight.

1.0.0

• 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 repeated
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
pump, slopeUpLeft, slopeUpRight, slopeDownLeft, slopeDownRight

---

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="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="expand 1.4s">
      expand
    </div>
  </div>
</template>

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

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

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();
  }
}

Svelte

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

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

<div>
  <div class="btn btn-primary" data-motionrack="expand 1.4s">
    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-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>
  );
};

License

MIT

• This library package is FREE for both commercial and personal use. ❤️

---

Author

Demjhon Silver