@samsiri/texteffect v1.3.2

Text effect

A javascript library to animate HTML text word by word on scroll events.

Installation

Using npm

Run this command in the terminal

$ npm i --save @samsiri/texteffect

Example

import React from 'react';
import TextEffectInit from '@samsiri/texteffect';

export default class Index from React.Component {
    componentDidMount() {
        TextEffectInit();
    }
    render() {
        return (
            <div>
                <h1 text-effect="fade-up">Hello I'm a developer</h1>
            </div>
        )
    }
}

Text Effect attributes

Just put the text-effect attribute inside your element (h1, h2, h3, h4, h5, span, p, div).

Attributes list

• fade-up: fade words from bottom to top;
• fade-down: fade words from top to bottom;
• fade-left: fade words from right to left;
• fade-right: fade words from left to right;
• flip-right: 90° rotation around Y-axis from left to right;
• flip-left: 90° rotation around Y-axis from right to left;
• flip-up: 90° rotation around X-axis from bottom to top;
• flip-down: 90° rotation around X-axis from top to bottom;
• scale-up: zoom out to original font size;
• scale-down: zoom in to original font size;
• [color]: set the word color for 2500ms. Ex: #690709 or shor form

About the author

Visit Sam Sirianni Website to get more info.