Author: | MAGGIx1404 |
---|---|
Views Total: | 852 views |
Official Page: | Go to website |
Last Update: | January 24, 2023 |
License: | MIT |
Preview:

Description:
Have you ever wanted to impress your users with text animations?
Textify.js is a fast and highly customizable 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.
It uses CSS transitions and a simple API, so both designer and developer can quickly whip up cool text effects and install them on any page.
How to use it:
1. Install & download.
# NPM $ npm i textify.js
2. Import the Textify.js.
// ES 6 import Textify from "textify.js"; // Browser <script src="Textify.min.js"></script>
3. Initialize the Textify.js library.
const example = new Textify();
4. Add the data-textify
attribute to the text to be animated on scroll.
<h1 data-textify> Textify.js Library Example </h1>
5. Or apply an easing function to the text animation via JavaScript. All available easing functions:
- easeInOut
- easeOut
- easeIn
- ease
- sharp
- linear
- back
- backIn
- backOut
- backInOut
- elasticIn
- elasticOut
- elasticInOut
- bounceIn
- bounceOut
- bounceInOut
- circIn
- circOut
- circInOut
const example = new Textify({ selector: ".selector", easing: "back", });
6. 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', });
7. API methods.
// start the animation example.show(); // stop the animation example.hide(); // re-calculate all texts position and offset example.onRefresh();
Changelog:
v2.3.3 (01/24/2023)
- add new animation for big texts like titles or headlines. and fixed old issues