Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maggix1404/textify-js
Next Generation Text Animation Library. (Adding Typescript support...)
https://github.com/maggix1404/textify-js
animation css javascript library reveal-animation scroll-animations text-animation
Last synced: about 2 months ago
JSON representation
Next Generation Text Animation Library. (Adding Typescript support...)
- Host: GitHub
- URL: https://github.com/maggix1404/textify-js
- Owner: MAGGIx1404
- License: mit
- Created: 2022-07-14T04:39:17.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-23T04:53:23.000Z (over 1 year ago)
- Last Synced: 2024-12-08T08:23:35.915Z (about 2 months ago)
- Topics: animation, css, javascript, library, reveal-animation, scroll-animations, text-animation
- Language: JavaScript
- Homepage: https://textify-js.vercel.app
- Size: 5.56 MB
- Stars: 189
- Watchers: 4
- Forks: 10
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
## Getting Started
Textify.js is a animation engine for web typography animations, which are use to create smooth, creative or seamless animations of typography. Also it’s provide multiple
animations types or custom animations on GSAP's power.
#
## Using packge manager
#### NPM
Install textify using npm:
```sh
npm install textify.js
```
#### yarn
Install textify using yarn
```sh
yarn add textify.js
```
#
## Using CDN:
```html
```
#
## ES6 module
```html
import Textify from 'https://cdn.jsdelivr.net/npm/textify.js/+esm';
import gsap from 'gsap';
new Textify({}, gsap);
```
#
## Usage
Import Textify.js and gsap:
```javascript
import Textify from "textify.js";
import gsap from "gsap";
```
Link ```Textify.min.css``` to document:
```html
```
Add `data-textify` attribute to your paragraph or an element that contain text.
```html
Some cool text.😎😎
```
Initialize textify to see magic (add gsap too).
```javascript
import Textify from "textify.js";
import gsap from "gsap";
new Textify({}, gsap);
```
By default textify use default configurations for text animations. You can pass an configuration object during initialization to tweak it.
#
## Configuration options
```javascript
splitType: "lines words chars", // chars or words or lines
largeText: false, // true or 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
}
```
For, more information about configs, check Documentation
#
# Documentation
Check main documentation of Textify.js here:
- [Site](https://textify-js.vercel.app)
- [Documentation & Examples](https://textify-js.vercel.app/documentation)
- [Demo](https://textify-js.vercel.app/example)
#
# Methods
Textify contains instance methods. these are used to control the animation. these methods are help to maintain animation stability. these
methods are following:
* `animateIn` - Reveal animation.
* `animateOut` - Hide animation.
* `reset` - Re-calulate all texts position and offset (call on DOM changes and resize event)
Example:
```javascript
const textObj = new Textify({}, gsap);
// reveal all animations of textObj
textObj.animateIn();
// hide all animations of textObj
textObj.animateOut();
// Re-calulate all texts position and offset
textObj.reset();
```
## License
Released under [MIT](/LICENSE) by [@MAGGIx1404](https://github.com/MAGGIx1404).
## Rate us
Enjoying textify.js? [Please leave a short review on Openbase](https://openbase.com/js/textify.js#rate)
