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 |
Version 1.0.1
Major Changes:
data-motionrack
& data-motionrack-once
Minor Changes:
Patch changes:
1.0.1
pump
, slopeUpLeft
, slopeUpRight
, slopeDownLeft
, and slopeDownRight
.1.0.0
To install the motionrack, you can use the following npm command:
npm install motionrack
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
Class name to wrap:
motionrack-wrap
layouts | quantity | layers |
---|---|---|
monoPad |
monoBox | 1 |
duoPad |
duoBox | 2 |
trioPad |
trioBox | 3 |
Sample website that used Motionrack
Direct method:
applicable for custom CSS, Bootstrap, Tailwind and Bulma
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>
);
};
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>
);
};
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>
);
};
<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>
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();
}
}
<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>
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>
);
};
Demjhon Silver