Skip to content

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.

License

Notifications You must be signed in to change notification settings

demjhonsilver/motionrack

Repository files navigation

Logo

Motionrack

npm version Package Size Downloads License


Table of Contents

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
React 18 & above
Vue.js 3 & above
Angular 16 & above
Svelte 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

About

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.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published