4 |
8 |
3 | 
4 |
5 | Next Generation Text Animation Library.
6 |
7 |
8 |
15 |
16 | 
17 |
18 | Live Examples
19 |
4 | Next Generation Text Animation Library.
6 |
7 |
8 |
15 |
16 |
17 |
18 | Live Examples
19 |
Some cool text.😎😎
78 | ``` 79 | 80 | Initialize textify to see magic (add gsap too). 81 | ```javascript 82 | import Textify from "textify.js"; 83 | import gsap from "gsap"; 84 | 85 | new Textify({}, gsap); 86 | ``` 87 | 88 |By default textify use default configurations for text animations. You can pass an configuration object during initialization to tweak it.
89 | 90 | # 91 | ## Configuration options 92 | 93 | ```javascript 94 | splitType: "lines words chars", // chars or words or lines 95 | largeText: false, // true or false 96 | observer: { 97 | repeat: false, // true or false 98 | threshold: 0.5 // 0.0 ~ 1.0 99 | }, 100 | animation: { 101 | by: "chars", // chars or words or lines 102 | duration: 0.5, // seconds 103 | stagger: 0.05, // seconds 104 | delay: 0.0, // seconds 105 | ease: "ease", // ease or linear or cubic-bezier 106 | customAnimation: false, // true or false 107 | 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 108 | animateProps: { 109 | opacity: 1, // 0 ~ 1 110 | y: "100%", // -100 ~ 100 (%) 111 | x: 0, // -100 ~ 100 (%) 112 | scale: 1, // 0 ~ 1 113 | rotate: 0, // -360 ~ 360 114 | skewX: 0, // -360 ~ 360 115 | skewY: 0 // -360 ~ 360 116 | } 117 | ``` 118 | 119 | For, more information about configs, check Documentation 120 | 121 | # 122 | # Documentation 123 | Check main documentation of Textify.js here: 124 | 125 | - [Site](https://textify-js.vercel.app) 126 | - [Documentation & Examples](https://textify-js.vercel.app/documentation) 127 | - [Demo](https://textify-js.vercel.app/example) 128 | 129 | # 130 | # Methods 131 | Textify contains instance methods. these are used to control the animation. these methods are help to maintain animation stability. these 132 | methods are following: 133 | 134 | * `animateIn` - Reveal animation. 135 | * `animateOut` - Hide animation. 136 | * `reset` - Re-calulate all texts position and offset (call on DOM changes and resize event) 137 | 138 | Example: 139 | ```javascript 140 | const textObj = new Textify({}, gsap); 141 | 142 | // reveal all animations of textObj 143 | textObj.animateIn(); 144 | 145 | // hide all animations of textObj 146 | textObj.animateOut(); 147 | 148 | // Re-calulate all texts position and offset 149 | textObj.reset(); 150 | 151 | ``` 152 | 153 | ## License 154 | 155 | Released under [MIT](/LICENSE) by [@MAGGIx1404](https://github.com/MAGGIx1404). 156 | 157 | ## Rate us 158 | 159 | Enjoying textify.js? [Please leave a short review on Openbase](https://openbase.com/js/textify.js#rate) 160 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | Tell them where to go, how often they can expect to get an update on a 20 | reported vulnerability, what to expect if the vulnerability is accepted or 21 | declined, etc. 22 | -------------------------------------------------------------------------------- /babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "sourceType": "unambiguous", 3 | "plugins": ["@babel/plugin-transform-runtime"], 4 | "presets": ["@babel/preset-env"] 5 | } 6 | -------------------------------------------------------------------------------- /dist/Textify.min.css: -------------------------------------------------------------------------------- 1 | /* fix safari custom kerning by adding a space after each character */ 2 | * { 3 | -webkit-font-feature-settings: "kern" 1; 4 | -moz-font-feature-settings: "kern" 1; 5 | -ms-font-feature-settings: "kern" 1; 6 | -o-font-feature-settings: "kern" 1; 7 | font-feature-settings: "kern" 1; 8 | font-kerning: none; 9 | -webkit-text-rendering: optimizeSpeed; 10 | text-rendering: optimizeSpeed; 11 | -webkit-transform: translateZ(0); 12 | transform: translateZ(0); 13 | } 14 | 15 | /* ----------------------------------------- */ 16 | .textify .word, 17 | .textify .char { 18 | display: inline-block; 19 | will-change: transform, opacity; /* for safari */ 20 | } 21 | 22 | /* ----------------------------------------- */ 23 | 24 | .textify .char { 25 | position: relative; 26 | } 27 | 28 | /** 29 | * Populate the psuedo elements with the character to allow for expanded effects 30 | * Set to `display: none` by default; just add `display: block` when you want 31 | * to use the psuedo elements 32 | */ 33 | .textify .char::before, 34 | .textify .char::after, 35 | .textify .word::after, 36 | .textify .word::before, 37 | .textify .line::after, 38 | .textify .line::before { 39 | position: absolute; 40 | top: 0; 41 | left: 0; 42 | visibility: hidden; 43 | transition: inherit; 44 | display: none; 45 | } 46 | 47 | .textify .char::before, 48 | .textify .char::after { 49 | content: attr(data-char); 50 | } 51 | 52 | .textify .word::after, 53 | .textify .word::before { 54 | content: attr(data-word); 55 | } 56 | 57 | .textify .line::after, 58 | .textify .line::before { 59 | content: attr(data-line); 60 | } 61 | 62 | /* ------------------------------------------- */ 63 | 64 | .textify .line-box, 65 | .textify .line { 66 | overflow: hidden; 67 | } 68 | -------------------------------------------------------------------------------- /dist/Textify.min.js: -------------------------------------------------------------------------------- 1 | /*! For license information please see Textify.min.js.LICENSE.txt */ 2 | !function(D,u){"object"==typeof exports&&"object"==typeof module?module.exports=u():"function"==typeof define&&define.amd?define([],u):"object"==typeof exports?exports["Textify.js"]=u():D["Textify.js"]=u()}(this,function(){"use strict";var e={d:function(D,u){for(var t in u)e.o(u,t)&&!e.o(D,t)&&Object.defineProperty(D,t,{enumerable:!0,get:u[t]})}},D=(e.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(D){if("object"==typeof window)return window}}(),e.o=function(D,u){return Object.prototype.hasOwnProperty.call(D,u)},{});function i(D,u){(null==u||u>D.length)&&(u=D.length);for(var t=0,e=new Array(u);t14 | The pages are not responsive yet. Please view this site on a desktop or laptop for now. we 15 | are working on it. Thank you for your patience. 16 |
17 |18 | We are looking for contributors to help us with this. If you are interested, please check 19 | out project's github repo and create a pull request. Thank you. 20 |
21 | 27 | Go to Github 28 | 29 |3 |5 | 6 | 7 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /docs/main-site/src/components/FooterBox.vue: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /docs/main-site/src/components/LargeAnimationBox.vue: -------------------------------------------------------------------------------- 1 | 2 |4 |
{{ content }}
4 | 5 | 8 | 11 |14 | Textify.js is a JavaScript library that allows you to animate text in a web page. It is 15 | a simple and easy to use library that provides you with a variety of animations to 16 | choose from and allows you to customize them to your liking. It is also very easy to 17 | install and use. 18 |
19 |24 | Start playing around with your own Textify demo on CodePen with this template that 25 | includes all of the essentials! 26 |
27 | Open in CodePen 28 |33 | Textify can be called without parameters, but only define 34 | engine and it will use the default options. Textify converts 35 | the text into a small div & span and 36 | add a class to each. You can use the class to create css animations. 37 |
38 |39 | Note: Textify.js's animations are not working properly without 40 | Textify.min.css. So make sure to include it in your 41 | project. 42 |
43 |CSS link :
44 |
46 | https://cdn.jsdelivr.net/npm/textify.js/dist/Textify.min.css
48 | JavaScript link :
50 |
52 | https://cdn.jsdelivr.net/npm/textify.js/dist/Textify.min.js
54 | GSAP (Engine) :
56 |
58 | https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js
60 | Install Textify.js from NPM:
66 |npm install textify.js gsap --save
68 | 70 | import Textify.js and gsap in your project and use it like this: 71 |
72 |import gsap from "gsap";
74 | import Textify from "textify.js";
75 | new Textify({}, gsap);
77 | 79 | Or you can use the CDN link in your project and use it like this: (default) 80 |
81 |
83 | https://cdn.jsdelivr.net/npm/textify.js/dist/Textify.min.js
84 |
85 |
86 | https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js
87 |
88 | 90 | And then you can use it as a Module in a modern web browsers, 91 | node.js, and deno. This is the recommended way to use Textify.js. 92 |
93 |import gsap from "gsap";
95 | import Textify from "textify.js";
96 | new Textify({}, gsap);
98 | 100 | Note: Textify.js's animations are not working properly without 101 | Textify.min.css. So make sure to include it in your 102 | project. 103 |
104 |Intialize Textify.js : (connect gsap with it)
109 |new Textify({ }, gsap);
111 | 113 | Textify.js default selector is data-textify. So you can use it 114 | in your HTML like this: 115 |
116 | <h1 data-textify>Hello World</h1>
118 | Then, see the magic! and animation will start automatically.
120 |448 | Textify contains instance methods. these are used to 449 | control the animation. these methods are help to maintain animation stability. these 450 | methods are following: 451 |
452 | 488 |493 | Using Textify you can create custom 494 | CSS animations. Textify's 495 | CSS provide some default and helpfull 496 | CSS styles for selector and it's pseudo elements. you can use 497 | these styles to create custom animations. 498 |
499 |500 | Textify's selector get some default data attributes. 501 | these data attributes are used to create custom animations. you can use these data 502 | attributes in your CSS to create custom animations. 503 |
504 |506 | When you are using Textify in your project, make sure 507 | call the Textify's instance methods after the webpage's 508 | all fonts or 509 | font-family are loaded. otherwise, animation will broke 510 | the animation. 511 |
512 |513 | We recommend to use 514 | 519 | fontfaceobserver 521 | to detect the fonts are loaded or not. and then call the 522 | Textify's instance methods. you can use 523 | Textify like this: 524 |
525 |
527 | import Textify from "textify.js";
528 |
529 | import FontFaceObserver from "fontfaceobserver";
530 |
531 |
532 | const font = new FontFaceObserver("Roboto");
533 |
534 |
535 | font.load().then(() => {
536 |
537 | new Textify();
538 |
539 | });
540 |
541 | 17 | These are some selected animations for your project. you can get code from here and use it 18 | in your project. 19 |
20 |29 | These animations are large text animations for small & large paragraphs. you can get code 30 | from here and use it 31 |
32 |27 | Textify.js have a powerful animations engine, which are use to create smooth, creative 28 | or seamless animations of typography. 29 |
30 |34 | Textify.js provide multiple animations types or custom animations on GSAP's power. 35 |
36 |40 | Textify.js is easy to use, you can create animations with just a few lines of code. 41 |
42 |46 | Textify.js is no dependencies, it's only use 47 | GSAP for animations. 48 |
49 |Working on other features, stay tuned!
52 |