{"version":3,"file":"HtmlAnimation.BO7OUFc2.mjs","names":["React.useRef","React.useState","React.useMemo"],"sources":["https:/framerusercontent.com/modules/nFsQ2N18z5pywcbSHZvW/zdxnTzD5qThgNrM9TY59/HtmlAnimation.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function HtmlAnimation(props){const{html=\"\",replayKey=\"\",style}=props;// Animations inside the iframe measure their own width on connect and run a\n// one-shot timeline. Mounted inside a hidden variant (an inactive tab, a\n// non-default component variant) they measure 0 and play to completion while\n// invisible, so by the time the variant is shown the layout is wrong and the\n// timeline has already finished — the card looks broken or empty.\n//\n// Remount the iframe whenever the host becomes visible (gains a size, or\n// scrolls/toggles into view). A fresh mount measures a real width and plays\n// from the start, so switching to a tab always shows the animation run.\nconst hostRef=React.useRef(null);const[mountKey,setMountKey]=React.useState(0);const wasVisible=React.useRef(false);React.useEffect(()=>{const el=hostRef.current;if(!el)return;const markVisible=isVisible=>{if(isVisible===wasVisible.current)return;wasVisible.current=isVisible;if(isVisible)setMountKey(key=>key+1);};const cleanups=[];if(typeof ResizeObserver!==\"undefined\"){const resizeObserver=new ResizeObserver(entries=>{for(const entry of entries){const rect=entry.contentRect;markVisible(rect.width>0&&rect.height>0);}});resizeObserver.observe(el);cleanups.push(()=>resizeObserver.disconnect());}if(typeof IntersectionObserver!==\"undefined\"){const intersectionObserver=new IntersectionObserver(entries=>{for(const entry of entries){markVisible(entry.isIntersecting);}},{threshold:.01});intersectionObserver.observe(el);cleanups.push(()=>intersectionObserver.disconnect());}return()=>cleanups.forEach(cleanup=>cleanup());},[]);const rootStyle=React.useMemo(()=>{return{position:\"relative\",width:style?.width??800,height:style?.height??500,border:0,borderRadius:0,boxShadow:\"none\",background:\"transparent\",overflow:\"hidden\",display:\"block\",...style};},[style]);if(!html){return /*#__PURE__*/_jsx(\"div\",{ref:hostRef,style:rootStyle});}return /*#__PURE__*/_jsx(\"div\",{ref:hostRef,style:rootStyle,children:/*#__PURE__*/_jsx(\"iframe\",{srcDoc:html,title:\"Animation\",scrolling:\"no\",sandbox:\"allow-scripts allow-same-origin\",loading:\"eager\",style:{width:\"100%\",height:\"100%\",border:0,display:\"block\",background:\"transparent\"}},`html-animation-${replayKey}-${mountKey}`)});}addPropertyControls(HtmlAnimation,{html:{type:ControlType.String,title:\"HTML\",displayTextArea:true,defaultValue:\"\"},replayKey:{type:ControlType.String,title:\"Replay Key\",defaultValue:\"\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HtmlAnimation\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HtmlAnimation.map"],"mappings":"2LAGG,SAAwB,EAAc,EAAM,CAAC,GAAK,CAAC,OAAK,GAAG,YAAU,GAAG,SAAO,EAS5E,EAAQA,EAAa,IAAI,EAAO,CAAC,EAAS,GAAaC,EAAe,CAAC,EAAQ,EAAWD,EAAa,EAAK,EAAE,MAAoB,CAAC,IAAM,EAAG,EAAQ,QAAQ,GAAG,CAAC,EAAG,OAAO,IAAM,EAAY,GAAW,CAAI,IAAY,EAAW,UAAe,EAAW,QAAQ,EAAa,GAAU,EAAY,GAAK,EAAI,CAAC,EAAE,EAAQ,EAAS,CAAC,EAAE,GAAG,OAAO,eAAiB,IAAY,CAAC,IAAM,EAAe,IAAI,eAAe,GAAS,CAAC,IAAI,IAAM,KAAS,EAAQ,CAAC,IAAM,EAAK,EAAM,YAAY,EAAY,EAAK,MAAM,GAAG,EAAK,OAAO,CAAC,CAAE,CAAC,CAAC,EAAE,EAAe,QAAQ,CAAE,EAAE,EAAS,SAAS,EAAe,WAAW,CAAC,CAAE,CAAC,GAAG,OAAO,qBAAuB,IAAY,CAAC,IAAM,EAAqB,IAAI,qBAAqB,GAAS,CAAC,IAAI,IAAM,KAAS,EAAS,EAAY,EAAM,cAAc,CAAG,EAAE,CAAC,UAAU,GAAG,CAAC,EAAE,EAAqB,QAAQ,CAAE,EAAE,EAAS,SAAS,EAAqB,WAAW,CAAC,CAAE,CAAC,UAAU,EAAS,QAAQ,GAAS,EAAQ,CAAC,CAAE,EAAE,CAAC,CAAC,EAAE,IAAM,EAAUE,OAAyB,CAAC,SAAS,WAAW,MAAM,GAAO,OAAO,IAAI,OAAO,GAAO,QAAQ,IAAI,OAAO,EAAE,aAAa,EAAE,UAAU,OAAO,WAAW,cAAc,SAAS,SAAS,QAAQ,QAAQ,GAAG,CAAK,GAAI,CAAC,CAAK,CAAC,EAA2E,OAArE,EAAyF,EAAK,MAAM,CAAC,IAAI,EAAQ,MAAM,EAAU,SAAsB,EAAK,SAAS,CAAC,OAAO,EAAK,MAAM,YAAY,UAAU,KAAK,QAAQ,kCAAkC,QAAQ,QAAQ,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,OAAO,EAAE,QAAQ,QAAQ,WAAW,aAAa,CAAC,EAAE,kBAAkB,EAAU,GAAG,GAAU,CAAC,CAAC,EAApX,EAAK,MAAM,CAAC,IAAI,EAAQ,MAAM,CAAS,CAAC,CAA8U,iBAZr/C,IAA4B,IAAoD,EAYs6C,EAAoB,EAAc,CAAC,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,OAAO,gBAAgB,GAAK,aAAa,EAAE,EAAE,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,aAAa,EAAE,CAAC,CAAC"}