Movanoba

Table of Contents

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

Description

Movanoba is a lightweight JavaScript library for animating elements while scrolling the webpage for React, Vue, Angular, and Svelte.

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

Release-notes

Version 1.0.0

Major Changes:

• Can set any time duration or delay for animations
• You can apply to images, headers , paragraphs, text, tables, buttons, and etc.

Minor Changes:

Patch changes:

v1.0.1

• The index.js will restore default location

Installation

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

npm install movanoba

Features

• Compatible for React, Vue, Angular and Svelte
• Supports TypeScript

You can set any number for Time Duration

time syntax | value | speed | ------ | -------- | --------------- 0.1s | 0.1 seconds | superfast 0.5s | 0.5 seconds | fast 1s | 1 seconds | moderate 1.1s | 1.1 seconds | default 2s | 2 seconds | delay 2.5s | 2.5 seconds | slow

closeUP, closeDOWN, closeLEFT, closeRIGHT
frameLEFT, frameRIGHT, wakeupLEFT, wakeupRIGHT
twistUP, twistDOWN, twistLEFT, twistRIGHT,
edgeTOPLEFT, edgeTOPRIGHT, edgeDOWNLEFT, edgeDOWNRIGHT
show, enlarge,  cycleLEFT, cycleRIGHT 

Demo

Demo Animations - Movanoba

React

Direct method:

applicable for custom CSS, Bootstrap, Tailwind and Bulma

• Bootstrap

import { useEffect } from 'react';
import { movement } from 'movanoba'; 

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

  return (
    <div>
      <div className="btn btn-primary" data-movement="frameRIGHT 0.4s">
        frameRIGHT 
      </div>
    </div>
  );
};

or

import { useEffect } from 'react';
import { movement } from 'movanoba'; 

const ExampleComponent = () => {
  useEffect(() => {
    movement();
  });

  return (
    <div>
      <div className="btn btn-primary" data-movement="frameRIGHT 0.5s">
        frameRIGHT
      </div>
    </div>
  );
};

export default ExampleComponent

• Tailwind

import { useEffect } from 'react';
import { movement } from 'movanoba'; 

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

  return (
    <div>
      <div className="bg-blue-500 text-white px-4 py-2" data-movement="frameRIGHT 4s">
        frameRIGHT 
      </div>
    </div>
  );
};

• Bulma

import { useEffect } from 'react';
import { movement } from 'movanoba'; 

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

  return (
    <div>
      <div className="box has-background-primary has-text-white p-4" data-movement="frameRIGHT">
        frameRIGHT
      </div>
    </div>
  );
};

Vue

<template>
  <div>
    <div class="btn btn-primary" data-movement="frameRIGHT 1.4s">
      frameRIGHT
    </div>
  </div>
</template>

<script>
import { onMounted } from 'vue';
import { movement } from 'movanoba';

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

Angular

import { Component, OnInit } from '@angular/core';
import { movement } from 'movanoba';

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

Svelte

<script>
  import { onMount } from "svelte";
  import { movement } from "movanoba";

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

<div>
  <div class="btn btn-primary" data-movement="frameRIGHT 1.4s">
    frameRIGHT
  </div>
</div>

License

MIT

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

Author

Demjhon Silver