textify-gsap
Version:
Advanced GSAP SplitText Animation Plugin with 20+ stunning text animation styles
2 lines (1 loc) • 9.81 kB
JavaScript
function t(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var e,s={exports:{}};var a=t(e?s.exports:(e=1,s.exports=function(){if("undefined"==typeof gsap)throw new Error("Textify requires GSAP. Please include GSAP before Textify.");if("undefined"==typeof SplitText)throw new Error("Textify requires GSAP SplitText plugin.");gsap.registerPlugin(SplitText,ScrollTrigger),gsap.config({nullTargetWarn:!1,force3D:!0,autoSleep:60});const t={selector:'[class*="textify-style"]',scrollTrigger:{start:"top 80%",toggleActions:"play none none reverse",once:!1,refreshPriority:-1}};function e(t){const e={};return Array.from(t.attributes).forEach(({name:t,value:s})=>{if(t.startsWith("data-")){const a=t.slice(5).replace(/-([a-z])/g,(t,e)=>e.toUpperCase());e[a]=isNaN(s)?s:+s}}),e}function s(){const t='\n [class*="textify-style"] .split-char {\n display: inline-block;\n transform-origin: center;\n will-change: transform, opacity;\n }\n [class*="textify-style"] {\n display: block;\n }\n [class*="textify-style"] .split-line, \n [class*="textify-style"] .split-char {\n display: inline-block;\n }\n /* Performance optimizations */\n [class*="textify-style"] {\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n -webkit-perspective: 1000;\n perspective: 1000;\n }\n /* Reduced motion support */\n @media (prefers-reduced-motion: reduce) {\n [class*="textify-style"] .split-char {\n animation-duration: 0.01ms !important;\n animation-delay: 0ms !important;\n transition-duration: 0.01ms !important;\n transition-delay: 0ms !important;\n }\n }\n ',e=document.createElement("style");e.textContent=t,document.head.appendChild(e)}const a={style1:t=>({styleClass:"particle-explosion",x:()=>gsap.utils.random(-800,800),y:()=>gsap.utils.random(-800,800),rotation:()=>gsap.utils.random(-360,360),scale:()=>gsap.utils.random(.2,2),opacity:0,ease:"power3.out",stagger:{amount:1.5,from:"random"},duration:1.8}),style2:t=>({styleClass:"explosive-zoom",scale:0,rotation:()=>gsap.utils.random(-360,360),opacity:0,transformOrigin:"center center",ease:"elastic.out(1, 0.3)",stagger:.08,duration:1.8}),style3:t=>({styleClass:"wave-up",y:100,skewY:15,opacity:0,ease:"power2.out",stagger:.04,duration:1.2}),style4:t=>({styleClass:"flip-3d",rotationY:180,rotationX:90,opacity:0,transformOrigin:"center",ease:"back.out(1.7)",stagger:.06,duration:1.4}),style5:t=>({styleClass:"bounce-scale",scale:.3,y:-80,opacity:0,ease:"bounce.out",stagger:.05,duration:1.6}),style6:t=>({styleClass:"spiral-zoom",scale:.1,rotation:720,opacity:0,transformOrigin:"center",ease:"power4.out",stagger:.05,duration:1.3}),style7:t=>({styleClass:"stretch-left",x:-200,scaleX:.1,opacity:0,ease:"elastic.out(1, 0.6)",stagger:.07,duration:1.5}),style8:t=>({styleClass:"float-particles",x:()=>gsap.utils.random(-400,400),y:()=>gsap.utils.random(-800,-200),scale:()=>gsap.utils.random(.5,1.5),opacity:0,ease:"power2.out",stagger:.02,duration:2}),style9:t=>({styleClass:"typewriter",scale:.5,y:20,opacity:0,ease:"power2.out",stagger:.1,duration:.8}),style10:t=>({styleClass:"magnetic-pull",x:()=>gsap.utils.random(-600,600),y:()=>gsap.utils.random(-300,300),scale:.7,rotation:()=>gsap.utils.random(-90,90),opacity:0,ease:"power3.out",stagger:.04,duration:1.2}),style11:t=>({styleClass:"flare-burst",scale:.2,opacity:0,filter:"brightness(200%)",ease:"expo.out",stagger:{amount:1,from:"center"},duration:1.4}),style12:t=>({styleClass:"ripple-wave",y:()=>gsap.utils.random(50,150),scaleX:.5,opacity:0,ease:"power2.inOut",stagger:{amount:1.2,from:"edges"},duration:1.6}),style13:t=>({styleClass:"matrix-fall",y:-500,opacity:0,skewY:20,filter:"grayscale(100%)",ease:"power3.out",stagger:{amount:1.5,from:"random"},duration:2}),style14:t=>({styleClass:"flip-carousel",rotationX:()=>gsap.utils.random(90,360),scale:.4,opacity:0,transformOrigin:"center",ease:"back.out(1.5)",stagger:.05,duration:1.8}),style15:t=>({styleClass:"pulse-glow",scale:()=>gsap.utils.random(.8,1.2),opacity:0,filter:"drop-shadow(0 0 10px cyan)",ease:"sine.inOut",stagger:{amount:1,from:"center"},duration:1.2}),style16:t=>({styleClass:"stagger-zoom",scale:0,opacity:0,ease:"power4.in",stagger:{each:.1,from:"end"},duration:1}),style17:t=>({styleClass:"wave-fold",x:()=>gsap.utils.random(-100,100),y:()=>gsap.utils.random(-50,50),skewX:()=>gsap.utils.random(-30,30),opacity:0,ease:"elastic.out(1, 0.4)",stagger:{amount:1.4,from:"start"},duration:1.7}),style18:t=>({styleClass:"sine-spray",x:()=>gsap.utils.random(-300,300),y:()=>200*Math.sin(Date.now()%360),scale:()=>gsap.utils.random(.5,1.5),opacity:0,ease:"sine.out",stagger:.03,duration:2.2}),style19:t=>{const e=10;return{styleClass:"flip-3d-grid",rotationY:()=>gsap.utils.random(0,360),rotationX:()=>gsap.utils.random(0,360),z:()=>gsap.utils.random(-500,500),opacity:0,ease:"back.out(2)",stagger:{grid:[Math.ceil(t.chars.length/e),e],from:"center",amount:2},duration:2.5}},style20:t=>({styleClass:"glow-trail",x:()=>gsap.utils.random(-200,200),y:()=>gsap.utils.random(-200,200),opacity:0,filter:"blur(4px) drop-shadow(0 0 20px magenta)",ease:"power2.out",stagger:{amount:1.5,from:"edges"},duration:2}),style21:t=>({styleClass:"glow-trail-small",x:0,y:0,opacity:0,filter:"blur(4px) drop-shadow(0 0 20px magenta)",ease:"power2.out",stagger:{amount:1.5,from:"edges"},duration:2}),style22:t=>({styleClass:"morphing-text",scaleY:.1,skewX:45,opacity:0,transformOrigin:"center bottom",ease:"power4.out",stagger:.04,duration:1.3}),style23:t=>({styleClass:"neon-flicker",opacity:0,filter:"drop-shadow(0 0 5px #00ff88) brightness(150%)",ease:"rough({ template: none.out, strength: 2, points: 20, taper: none, randomize: true, clamp: false })",stagger:.08,duration:1.5}),style24:t=>({styleClass:"liquid-wave",y:60,scaleY:.3,skewY:()=>gsap.utils.random(-20,20),opacity:0,ease:"elastic.out(1, 0.8)",stagger:{amount:1.2,from:"center"},duration:1.8}),style25:t=>({styleClass:"holographic-shift",x:()=>gsap.utils.random(-30,30),rotationY:()=>gsap.utils.random(-45,45),opacity:0,filter:"hue-rotate(180deg) saturate(150%)",ease:"power2.out",stagger:.05,duration:1.4}),style26:t=>({styleClass:"glitch-matrix",x:()=>gsap.utils.random(-20,20),y:()=>gsap.utils.random(-10,10),opacity:0,filter:"contrast(150%) brightness(120%)",ease:"rough({ template: none.out, strength: 1, points: 10, taper: none, randomize: true })",stagger:.02,duration:1.1}),style27:t=>({styleClass:"cinematic-reveal",y:100,opacity:0,scaleY:0,transformOrigin:"center top",ease:"power4.out",stagger:{amount:1.5,from:"start"},duration:2}),style28:t=>({styleClass:"floating-letters",y:()=>gsap.utils.random(-30,30),x:()=>gsap.utils.random(-20,20),rotation:()=>gsap.utils.random(-15,15),opacity:0,ease:"power2.out",stagger:.06,duration:1.6}),style29:t=>({styleClass:"digital-scan",scaleX:0,opacity:0,filter:"brightness(200%) contrast(150%)",transformOrigin:"left center",ease:"power3.out",stagger:.03,duration:1.2}),style30:t=>({styleClass:"particle-storm",x:()=>gsap.utils.random(-500,500),y:()=>gsap.utils.random(-300,300),rotation:()=>gsap.utils.random(-180,180),scale:()=>gsap.utils.random(.3,1.5),opacity:0,ease:"power3.out",stagger:{amount:2,from:"random"},duration:2.2}),style31:t=>({styleClass:"vintage-fade",opacity:0,filter:"sepia(100%) contrast(120%) brightness(90%)",scale:.8,ease:"power2.out",stagger:.1,duration:1.8}),style32:t=>({styleClass:"cyber-grid",y:-100,opacity:0,skewY:-10,filter:"drop-shadow(0 0 8px cyan) contrast(150%)",ease:"power4.out",stagger:{amount:1.3,from:"edges"},duration:1.6}),style33:t=>({styleClass:"elastic-bounce",scaleY:.1,y:50,opacity:0,transformOrigin:"center bottom",ease:"elastic.out(1.2, 0.4)",stagger:.05,duration:1.7}),style34:t=>({styleClass:"prism-split",x:()=>gsap.utils.random(-15,15),opacity:0,filter:"hue-rotate(90deg) saturate(200%)",ease:"power2.out",stagger:{amount:1,from:"center"},duration:1.4}),style35:t=>({styleClass:"smoke-reveal",y:40,opacity:0,filter:"blur(8px)",ease:"power3.out",stagger:.08,duration:1.9}),style36:t=>({styleClass:"quantum-shift",scale:()=>gsap.utils.random(.5,1.5),x:()=>gsap.utils.random(-40,40),y:()=>gsap.utils.random(-40,40),rotation:()=>gsap.utils.random(-90,90),opacity:0,ease:"power3.out",stagger:{amount:1.8,from:"random"},duration:2.1})};function r(s,r,o={}){return new Promise(l=>{document.fonts.ready.then(()=>{const n=new SplitText(s,{type:"lines,words,chars",tag:"span",linesClass:"split-line",wordsClass:"split-word",charsClass:"split-char"}),i=a[`style${r}`];if(!i)return l();const c=i(n),u=e(s),p=Object.assign({},c,u,o),y=p.styleClass;delete p.styleClass,s.classList.add(`textify-style${r}`,y),gsap.from(n.chars,{...p,scrollTrigger:Object.assign({trigger:s},t.scrollTrigger),onComplete:l})})})}const o={version:"4.0.0",init(e={}){return Object.assign(t,e),s(),document.querySelectorAll(t.selector).forEach(t=>{const e=t.className.match(/textify-style(\d+)/);e&&r(t,+e[1])}),this},animate(t,e,s){const a="string"==typeof t?document.querySelector(t):t;return a?r(a,e,s):Promise.reject("Element not found")},animateAll(e=t.selector,s){const a=document.querySelectorAll(e);return Promise.all(Array.from(a).map(t=>{const e=s||(t.className.match(/textify-style(\d+)/)||[])[1];return e?r(t,+e):Promise.resolve()}))},isAnimated(t){const e="string"==typeof t?document.querySelector(t):t;return!(!e||!e.querySelector(".split-char"))},getStyles:()=>Object.keys(a).map(t=>({name:t,config:a[t]})),addStyle(t,e){return a[t]=e,this}};return document.addEventListener("DOMContentLoaded",()=>{document.querySelector('[data-textify="auto"]')&&o.init()}),o}()));export{a as default};