Author: | MAGGIx1404 |
---|---|
Views Total: | 575 views |
Official Page: | Go to website |
Last Update: | August 3, 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 <link src="/dist/Textify.min.css" rel="stylesheet"/> <script src="/dist/Textify.min.js"></script>
3. The latest Textify.js supports custom animations based on the GSAP library.
# NPM $ npm i gsap
// ES 6 import gsap from 'gsap'; // Browser <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
4. Initialize the Textify.js library.
// without GSAP const example = new Textify({ // options here }); // with GSAP const example = new Textify({ // options here }, gsap);
5. Add the data-textify
attribute to the text to be animated on scroll.
<h1 data-textify> Textify.js Library Example </h1>
6. Config the text reveal animation:
el: "[data-textify]" splitType: "lines words chars", // chars or words or lines largeText: false, observer: { repeat: false, // true or false threshold: 0.5 // 0.0 ~ 1.0 }, animation: { by: "chars", // chars or words or lines duration: 0.5, // seconds stagger: 0.05, // seconds delay: 0.0, // seconds ease: "ease", // ease or linear or cubic-bezier customAnimation: false, // true or false transformOrigin: "center center", // center center or top left or top center or top right or center right or bottom right or bottom center or bottom left or center left animateProps: { opacity: 1, // 0 ~ 1 y: "100%", // -100 ~ 100 (%) x: 0, // -100 ~ 100 (%) scale: 1, // 0 ~ 1 rotate: 0, // -360 ~ 360 skewX: 0, // -360 ~ 360 skewY: 0 // -360 ~ 360 }
7. API methods.
// reveal animation example.animateIn(); // hide animation example.animateOut(); // re-calculate all texts position and offset example.reset();
Changelog:
v3.0.1 (08/03/2023)
- Textify.js v3.0.1 have too much new features and we added new animation engine. and engine get power from GSAP. now your text animation make more smooth and light weight. we add few new animation props and options.
v2.3.3 (01/24/2023)
- add new animation for big texts like titles or headlines. and fixed old issues