Anima-view NPM

AnimaView a minimalistic package that allows you to animate text on scroll.

Installation

Use the package manager npm to install AnimaView.

npm install anima-view

or download files animaview.min.js | animaview.min.css

Usage

html

<!-- use elements with id, class, or data attribute -->
<p data-anima>Example text</p>

css

.word {
  display: inline-block;
  overflow: hidden;
}
.word span {
  display: block;
  transition: all 1s cubic-bezier(0.28, 0.81, 0.43, 0.97);
  transition-delay: 0.145s;
}
.word.show span {
  transform: translateY(0) skewY(0) !important;
}

js

import AnimaView from 'anima-view';
// can be any dom element
const elements = document.querySelectorAll('[data-anima]');
// without options default is bottom
const anima = new AnimaView(elements, 'options');
anima.init();

Options

You can use the second parameter as the type of animation. There are currently 5 animation types supported

'left', 'right', 'top', 'bottom', 'random'.

The second parameter is taken as a string. If no parametre has been passed, the default animation type is 'bottom'.

Example using with React

import { useEffect } from 'react';
import AnimaView from 'anima-view';

export default function Component() {
  useEffect(() => {
    const elements = document.querySelectorAll('[data-anima]');
    const anima = new AnimaView(elements, 'random');
    anima.init();
  });
  return <p data-anima>Example text</p>;
}