{"id":21589775,"url":"https://github.com/maggix1404/textify-js","last_synced_at":"2025-08-20T08:33:25.996Z","repository":{"id":48007417,"uuid":"513760653","full_name":"MAGGIx1404/Textify-js","owner":"MAGGIx1404","description":"Next Generation Text Animation Library. (Adding Typescript support...)","archived":false,"fork":false,"pushed_at":"2023-10-23T04:53:23.000Z","size":5834,"stargazers_count":189,"open_issues_count":11,"forks_count":10,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-12-08T08:23:35.915Z","etag":null,"topics":["animation","css","javascript","library","reveal-animation","scroll-animations","text-animation"],"latest_commit_sha":null,"homepage":"https://textify-js.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MAGGIx1404.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-14T04:39:17.000Z","updated_at":"2024-12-03T11:18:11.000Z","dependencies_parsed_at":"2024-06-21T13:05:41.805Z","dependency_job_id":"1ab3f610-5336-4e36-ac8b-114e2d438966","html_url":"https://github.com/MAGGIx1404/Textify-js","commit_stats":null,"previous_names":["maggix1404/textify.js"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MAGGIx1404%2FTextify-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MAGGIx1404%2FTextify-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MAGGIx1404%2FTextify-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MAGGIx1404%2FTextify-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MAGGIx1404","download_url":"https://codeload.github.com/MAGGIx1404/Textify-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230408171,"owners_count":18220974,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css","javascript","library","reveal-animation","scroll-animations","text-animation"],"created_at":"2024-11-24T16:15:45.133Z","updated_at":"2024-12-19T09:08:02.940Z","avatar_url":"https://github.com/MAGGIx1404.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e\n    \u003cimg width=\"600\" src=\"https://res.cloudinary.com/drnquxnie/image/upload/v1690790528/logo_djcdby.svg\" alt=\"logo\"\u003e\n  \u003c/h1\u003e\n  \u003cp\u003eNext Generation Text Animation Library.\u003c/p\u003e\n  \u003cp\u003e\n    \u003cimg src=\"https://data.jsdelivr.com/v1/package/npm/textify.js/badge?style=rounded\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/textify.js?color=green\u0026label=version\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-green\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/maintained-yes-green\" alt=\"maintained - yes\"\u003e\n    \u003ca href=\"/CONTRIBUTING.md\" title=\"Go to contributions doc\"\u003e\u003cimg src=\"https://img.shields.io/badge/contributions-welcome-green\" alt=\"contributions - welcome\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.javascript.com/\" title=\"Go to JavaScript homepage\"\u003e\u003cimg src=\"https://img.shields.io/badge/Made_with-JavaScript-green?logo=javascript\u0026logoColor=yellow\" alt=\"Made with JavaScript\"\u003e\u003c/a\u003e\n  \u003c/p\u003e\n  \u003cp\u003e\n    \u003ca href=\"https://textify-js.vercel.app/example\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://res.cloudinary.com/drnquxnie/image/upload/v1690790528/mini-logo_tzz6do.svg\" alt='mini-logo' width='30px'\u003e\n    \u003cbr\u003e\n    \u003cb style='color:#3FCF8E; text-decoration: 1px underline #3FCF8E;'\u003eLive Examples\u003c/b\u003e\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n## Getting Started\nTextify.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\nanimations types or custom animations on \u003ca href=\"https://greensock.com/gsap/\" target=\"_blank\" style=\"color:#3FCF8E;\"\u003eGSAP\u003c/a\u003e's power.\n\n#\n## Using packge manager\n\n#### NPM\nInstall textify using npm:\n```sh\nnpm install textify.js\n```\n\n#### yarn\nInstall textify using yarn\n```sh\nyarn add textify.js\n```\n\n#\n## Using CDN:\n```html\n\u003clink src=\"https://cdn.jsdelivr.net/npm/textify.js@3.0.1/dist/Textify.min.css\" rel=\"stylesheet\"/\u003e\n\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/textify.js@3.0.1/dist/Textify.min.js\"\u003e\u003c/script\u003e\n```\n\n#\n## ES6 module\n```html\n\u003cscript type=\"module\"\u003e\n    import Textify from 'https://cdn.jsdelivr.net/npm/textify.js/+esm';\n    import gsap from 'gsap';\n\n    new Textify({}, gsap);\n\u003c/script\u003e\n```\n\n#\n## Usage\nImport Textify.js and gsap:\n```javascript\nimport Textify from \"textify.js\";\nimport gsap from \"gsap\";\n```\n\nLink ```Textify.min.css``` to document:\n\n```html\n\u003clink src=\"https://cdn.jsdelivr.net/npm/textify.js/dist/Textify.min.css\" rel=\"stylesheet\"/\u003e\n```\n\nAdd `data-textify` attribute to your paragraph or an element that contain text.\n```html\n\u003cp data-textify\u003eSome cool text.😎😎\u003c/p\u003e\n```\n\nInitialize textify to see magic (add gsap too).\n```javascript\nimport Textify from \"textify.js\";\nimport gsap from \"gsap\";\n\nnew Textify({}, gsap);\n```\n\n\u003cp\u003eBy default textify use default configurations for text animations. You can pass an configuration object during initialization to tweak it.\u003c/p\u003e\n\n#\n## Configuration options\n\n```javascript\n  splitType: \"lines words chars\", // chars or words or lines\n  largeText: false, // true or false\n  observer: {\n    repeat: false, // true or false\n    threshold: 0.5 // 0.0 ~ 1.0\n  },\n  animation: {\n    by: \"chars\", // chars or words or lines\n    duration: 0.5, // seconds\n    stagger: 0.05, // seconds\n    delay: 0.0, // seconds\n    ease: \"ease\", // ease or linear or cubic-bezier\n    customAnimation: false, // true or false\n    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\n    animateProps: {\n      opacity: 1, // 0 ~ 1\n      y: \"100%\", // -100 ~ 100 (%)\n      x: 0, // -100 ~ 100 (%)\n      scale: 1, // 0 ~ 1\n      rotate: 0, // -360 ~ 360\n      skewX: 0, // -360 ~ 360\n      skewY: 0 // -360 ~ 360\n    }\n```\n\nFor, more information about configs, check \u003ca href=\"https://textify-js.vercel.app/documentation\" target=\"_blank\" style=\"color:#3FCF8E;\"\u003eDocumentation\u003c/a\u003e\n\n#\n# Documentation\nCheck main documentation of Textify.js here:\n\n- [Site](https://textify-js.vercel.app)\n- [Documentation \u0026 Examples](https://textify-js.vercel.app/documentation)\n- [Demo](https://textify-js.vercel.app/example)\n\n#\n# Methods\nTextify contains instance methods. these are used to control the animation. these methods are help to maintain animation stability. these\nmethods are following:\n\n* `animateIn` - Reveal animation.\n* `animateOut` - Hide animation.\n* `reset` - Re-calulate all texts position and offset (call on DOM changes and resize event)\n\nExample:\n```javascript\nconst textObj = new Textify({}, gsap);\n\n// reveal all animations of textObj\ntextObj.animateIn();\n\n// hide all animations of textObj\ntextObj.animateOut();\n\n// Re-calulate all texts position and offset\ntextObj.reset();\n\n```\n\n## License\n\nReleased under [MIT](/LICENSE) by [@MAGGIx1404](https://github.com/MAGGIx1404).\n\n## Rate us\n\nEnjoying textify.js? [Please leave a short review on Openbase](https://openbase.com/js/textify.js#rate)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaggix1404%2Ftextify-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaggix1404%2Ftextify-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaggix1404%2Ftextify-js/lists"}