movanoba v1.0.1

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

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