@infinityfx/lively
Version:
Feature complete, lightweight react animation library.
4 lines (3 loc) • 3.08 kB
JavaScript
"use client";
import{__rest as e}from"tslib";import{jsx as n}from"react/jsx-runtime";import{createContext as r,useRef as t,use as i,useMemo as a,useCallback as o,useImperativeHandle as s,useEffect as u,useLayoutEffect as l,Children as c,isValidElement as d,cloneElement as m}from"react";import p from"./core/clip.js";import f from"./core/timeline.js";import{merge as h,pick as v,combineRefs as g}from"./core/utils.js";const y=r(null);function b(r){const b=t(null),j=t([]),x=i(y),w=r.inherit&&x?h({},r,v(x,["group","animations","triggers","animate","initial","stagger","staggerLimit","deform","disabled","paused"])):r,{id:O="",inherit:L,triggers:k=[],disabled:E,adaptive:z=!1,manual:A=!1,paused:C}=w,M=void 0!==r.order?r.order:(L&&(null==x?void 0:x.index)||0)+1,D=t([]),T=a((()=>{const e={animate:p.from(w.animate,w.initial)};for(const n in w.animations)e[n]=p.from(w.animations[n],w.initial);return e}),[]),V=t(new f(Object.assign(Object.assign({},w),{mountClips:k.reduce(((e,{name:n,on:r})=>("mount"===r&&e.push(T[n||"animate"]),e)),[])}))),q=o(((e,n={},t=1)=>{var i;const a=T[e];if(E||M>1&&t<2)return 0;h(n,{reverse:null==a?void 0:a.reverse});let o=0,s=n.delay||0,u=a?V.current.time(a):0;for(const r of j.current)(null===(i=r.current)||void 0===i?void 0:i.inherit)&&(o=Math.max(r.current.play(e,h({delay:s+u},n),t+1),o));const l=(n.reverse?o:s)*(M/t);return a&&V.current.add(a,h({delay:l},n)),r.onAnimationEnd&&setTimeout(r.onAnimationEnd.bind({},e),1e3*(u+l)),u+l}),[E,M]);function B(n,r={}){let t=0;for(let i of k){const{name:a,on:o}=i,s=e(i,["name","on"]);o===n&&(t=Math.max(q(a||"animate",h(s,r)),t))}return t}return s(g(b,r.ref),(()=>({play:q,trigger:B,timeline:V.current,children:j.current,inherit:L,adaptive:z,group:w.group,id:O})),[k]),u((()=>V.current.pause(!(!C&&!E))),[C,E]),u((()=>{for(let n=0;n<k.length;n++){let r=k[n],{name:t,on:i}=r,a=e(r,["name","on"]);if("string"==typeof i)continue;const o="boolean"==typeof i?i:i.called,s=D.current[n];void 0!==s&&o&&o!==s&&q(t||"animate",a),D.current[n]=o}}),[k]),l((()=>{const e=()=>V.current.cache();return V.current.link(w.animate),window.addEventListener("resize",e),null==x||x.add(b),document.fonts.ready.then((()=>{A||V.current.mounted||B("mount"),V.current.mounted=!0})),()=>{window.removeEventListener("resize",e),V.current.unlink(),null==x||x.remove(b)}}),[]),n(y,{value:Object.assign(Object.assign({},r.passthrough?x:Object.assign({index:M},w)),{add:e=>{r.passthrough&&(null==x||x.add(e)),j.current.includes(e)||j.current.push(e)},remove:e=>{r.passthrough&&(null==x||x.remove(e));const n=j.current.indexOf(e)||-1;n>=0&&j.current.splice(n,1)}}),children:c.map(r.children,(e=>d(e)?m(e,{ref:g((e=>V.current.insert(e)),e.props.ref),pathLength:1,style:h({backfaceVisibility:"hidden",willChange:"transform"},e.props.style,T.animate.initial,{strokeDasharray:1}),"data-lively-offset-boundary":!(!["x","y"].some((e=>{var n;return null===(n=r.cachable)||void 0===n?void 0:n.includes(e)}))&&void 0!==r.cachable)||void 0}):e))})}b.isLively=!0;export{y as AnimatableContext,b as default};
//# sourceMappingURL=animatable.js.map