fling.jsv0-alpha

An open-source, lightweight, easy-to-use text animation library for web.

Installation

I currently do not have this plugin on NPM or CDNJS, so if you want to install you will have to download the code.

Usage

Initialize Fling with the fling() function, and pass an HTML element (or multiple in an array) and an object into it.

                    
fling('#elementId', {
   effect: "rotate",
   delay: 50,
   duration: 500,
   letters: true
})

HTML Attributes are partially supported.

To use Fling with HTML attributes:

                    
<h1 data-fling="slide" data-fling-delay="100" data-fling-duration="500" data-fling-letters="true">Text to Animate></h1>

The data-fling attribute value should be one of the animation types listed below.

The data-fling-letters attribute value should be a boolean.

The data-fling-delay and data-fling-duration attribute values should be an integer.

The only necessary attribute to include is data-fling. The rest are optional.

Parameters/Settings

Parameter	Description
Effect	The animation effect (a string). Listed below.
Delay	Animation delay. An integer, in milliseconds. Minimum value is 1.
Duration	Animation duration. An integer, in milliseconds.
Letters (optional)	Setting this to `true` will individually animate each letter in the element. By default, this setting is `false`.

Example of Initialization

                
<h1 id="h1">Text to Animate</h1>
<script src="https://fling.gq/src/index.min.js"></script>
<script>
  fling('#elementId',{
    effect: "rotate",
    delay: 50,
    duration: 500,
    letters: true
  })
</script>

Animation types

Animation	Description
slide	Slides from below
scale	Scales the text from the center
opacity	Fades the text in
rotate	Rotates the text in counterclockwise

Made by PineappleRind