Have you ever wanted to impress your users with text animations?
Textify.js is a fast and highly customizable open-source library for creating text reveal animations triggered by scroll. This can be used for displaying instructions, tips, or just about anything else you want to show on scroll.
Textify.js is a simple library that works with scroll-base animations, and user can use any scrolling libraries likes locomotive-scroll, smoothscroll, etc. All libraries are compatible with Textify.js.
How to Use Textify.js
Step 1: You can install Textify.js in three ways:
Using package manager (NPM)
npm install textify.js
Using CDN
<link src="https://cdn.jsdelivr.net/npm/textify.js/dist/Textify.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/textify.js/dist/Textify.min.js"></script>
ES6 Module
<script type="module">
import textifyJs from 'https://cdn.jsdelivr.net/npm/textify.js/+esm';
const { Textify } = textifyJs;
new Textify();
</script>Step 2: Add the data-textify attribute to the text to be animated on scroll.
<h1 data-textify> Hello Sunil! </h1>
By default textify use default configurations for text animations. You can pass an configuration object during initialization to tweak it.
Step 3: Then apply an easing function to the text animation via JavaScript.
const example = new Textify({
selector: ".selector",
easing: "back",
});Step 4: Finally, config the text reveal animation.
const example = new Textify({
selector: ".selector",
// easing function
easing: "Default",
// fade easing
fadeEasing: 'Default'
// duration in ms
duration: 1450,
// delay in ms
delay: 100,
// enable fade animation
fade: false For fade animation.
// Text reveal direction
// false = bottom to top
top: false,
// whether animation should happen only once
once: true,
// add rotation on words
rotation: 0,
// add scaling on words
scale: 1,
// default selector
selector: 'data-textify',
});Example:
See the Pen Text Reveal Animations On Scroll – Textify.js by Sunil Pradhan (@Sunil_Pradhan) on CodePen.
Add comment