@lynksen/react-gsap-utils/dist/esm/bundle.js

Collection of zero-config, drop-in utilities to animate React elements and components using GSAP Tween animation props.

import e,{useRef as t,useEffect as r,useState as n}from"react";import o,{gsap as a}from"gsap";import{ScrollTrigger as i}from"gsap/ScrollTrigger";function s({children:n,YOffset:o=80,from:s={opacity:0,y:"60%",duration:.6,ease:"power2.out"},className:c="",childClassName:l="",onComplete:d=(()=>{}),onStart:u=(()=>{}),debug:m=!1}){const f=t(null),g=t(null),p=s;return s.duration||(p.duration=.6),s.ease||(p.ease="power2.out"),r((()=>{const e=a.context((()=>{if(a.registerPlugin(i),!g.current||!f.current)return;let e={};d&&(e.onComplete=d),u&&(e.onStart=u),a.from(g.current,Object.assign(Object.assign(Object.assign({},p),{scrollTrigger:{trigger:f.current,start:`top ${o}%`,end:`top ${o-5}%`,markers:!!m,toggleActions:"play none none reverse"}}),e))}));return()=>e.revert()}),[]),e.createElement("div",{ref:f,className:`ScrollTriggerRevealContainer ${c||""}`},e.createElement("div",{className:l||"",ref:g},n))}function c({children:a,mounted:i,className:s,fromTo:c=[{opacity:0,y:200},{opacity:1,y:0,duration:.5,ease:"sine.out"}]}){const[l,d]=n(i),u=t(null);return r((()=>{const e=u.current;e&&(!0===i?(d(!0),o.fromTo(e,c[0],c[1])):!1===i&&o.to(e,Object.assign(Object.assign({},c[0]),{duration:c[1].duration})).then((()=>d(!1))))}),[i]),e.createElement("div",{className:s,ref:u},l&&a)}!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".ScrollTriggerRevealContainer {\n  width: fit-content;\n  height: fit-content;\n  overflow: hidden;\n}\n");export{c as AnimateOnMount,s as AnimateOnScroll};
//# sourceMappingURL=bundle.js.map