cupertino-text
Version:
A beautiful Cupertino-style slide-down fade-in text animation effect for React applications, with Apple-style staggered animations
3 lines (2 loc) • 3.63 kB
JavaScript
import t,{useState as e,useRef as r,useEffect as n}from"react";function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=Array(e);r<e;r++)n[r]=t[r];return n}function o(t,e,r){return(e=function(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var n=r.call(t,e);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function a(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function c(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?a(Object(r),!0).forEach((function(e){o(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function l(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var n,i,o,a,c=[],l=!0,u=!1;try{if(o=(r=r.call(t)).next,0===e){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=o.call(r)).done)&&(c.push(n.value),c.length!==e);l=!0);}catch(t){u=!0,i=t}finally{try{if(!l&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(u)throw i}}return c}}(t,e)||function(t,e){if(t){if("string"==typeof t)return i(t,e);var r={}.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?i(t,e):void 0}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var u=function(i){var o=i.children,a=i.delay,u=void 0===a?0:a,s=i.duration,f=void 0===s?800:s,y=i.stagger,p=void 0===y?80:y,b=i.distance,m=void 0===b?60:b,v=i.className,d=void 0===v?"":v,g=i.style,O=void 0===g?{}:g,h=i.lines,j=void 0!==h&&h,w=i.triggerOnce,P=void 0===w||w,S=l(e(!1),2),E=S[0],x=S[1],A=l(e(!1),2),D=A[0],I=A[1],k=r(null);n((function(){var t=new IntersectionObserver((function(t){var e=l(t,1)[0];!e.isIntersecting||P&&D?P||e.isIntersecting||x(!1):setTimeout((function(){x(!0),P&&I(!0)}),u)}),{threshold:.1});return k.current&&t.observe(k.current),function(){return t.disconnect()}}),[u,P,D]);return t.createElement("div",{ref:k,className:d,style:c({overflow:"hidden"},O)},function(){if("string"!=typeof o)return t.createElement("span",{style:{display:"inline-block",transform:E?"translateY(0)":"translateY(".concat(m,"px)"),opacity:E?1:0,transition:"all ".concat(f,"ms cubic-bezier(0.25, 0.46, 0.45, 0.94)"),transitionDelay:"".concat(u,"ms")}},o);var e,r=(e=o,j?e.split("\n").map((function(t,e){return{content:t,index:e}})):e.split(" ").map((function(t,e){return{content:t,index:e}})));return r.map((function(e,n){return t.createElement("span",{key:n,style:{display:j?"block":"inline-block",transform:E?"translateY(0)":"translateY(".concat(m,"px)"),opacity:E?1:0,transition:"all ".concat(f,"ms cubic-bezier(0.25, 0.46, 0.45, 0.94)"),transitionDelay:"".concat(n*p+u,"ms"),marginRight:j?"0":"0.25em"}},e.content,j&&n<r.length-1&&t.createElement("br",null))}))}())};export{u as default};
//# sourceMappingURL=index.esm.js.map