bside-solution-client-websites/inasa-healthcare
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

- update framer motion scripts

Browse Source
This commit is contained in:
oonyeje 2025-12-05 08:17:05 -05:00
parent 9a6902b4a0
commit 0ce5b12f34
7 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.webstudio/data.json
View File

@ -1,16 +1,16 @@
{
"build": {
"id": "b2fe0b81-fe34-4f6a-bd68-efa6c4be59c2",
"id": "d1355bdf-5c5f-43e0-b303-63bbe781da27",
"projectId": "363652e3-9846-4534-acdf-9b2b3c66eec0",
"version": 3200,
"createdAt": "2025-12-05T12:38:39.797+00:00",
"updatedAt": "2025-12-05T12:38:39.797+00:00",
"version": 3257,
"createdAt": "2025-12-05T13:16:43.55+00:00",
"updatedAt": "2025-12-05T13:16:43.55+00:00",
"pages": {
"meta": {
"siteName": "Inasa Healthcare",
"contactEmail": "inasahealthcare@gmail.com",
"faviconAssetId": "9f21d5d9649e25cc357333e82a693d0abc56d6ae0466834542e33517997ecc16",
"code": ""
"code": "<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>"
},
"compiler": {
"atomicStyles": true
@ -28708,7 +28708,7 @@
"instanceId": "r-znm5ELAYy0FXTViUlnW",
"name": "code",
"type": "string",
"value": "<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"about\");\n debugger;\n const framer = window.framer;\n\n // Create a motion value for opacity\n const opacity = framer.motion.value(0);\n\n // Define the animation\n const animation = framer.motion.animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"
"value": "<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"about\");\n debugger;\n const {animate} = Motion\n\n // Define the animation\n const animation = animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"
}
],
[
@ -28738,7 +28738,7 @@
"instanceId": "VJgLL4H1vzcr6iUQ4EmYk",
"name": "code",
"type": "string",
"value": "<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"services\");\n const framer = window.framer;\n\n // Create a motion value for opacity\n const opacity = framer.motion.value(0);\n\n // Define the animation\n const animation = framer.motion.animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"
"value": "<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"services\");\n debugger;\n const {animate} = Motion\n\n // Define the animation\n const animation = animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"
}
],
[
@ -28758,7 +28758,7 @@
"instanceId": "3uk4jqZSxYBVymG0UHX47",
"name": "code",
"type": "string",
"value": "<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"insurance\");\n const framer = window.framer;\n\n // Create a motion value for opacity\n const opacity = framer.motion.value(0);\n\n // Define the animation\n const animation = framer.motion.animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"
"value": "<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"insurance\");\n debugger;\n const {animate} = Motion\n\n // Define the animation\n const animation = animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"
}
],
[
@ -28778,7 +28778,7 @@
"instanceId": "ctpDuAXXXjro4xY_qTIjy",
"name": "code",
"type": "string",
"value": "<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"contact\");\n const framer = window.framer;\n\n // Create a motion value for opacity\n const opacity = framer.motion.value(0);\n\n // Define the animation\n const animation = framer.motion.animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"
"value": "<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"contact\");\n debugger;\n const {animate} = Motion\n\n // Define the animation\n const animation = animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"
}
],
[

2
app/__generated__/$.tsx generated
View File

@ -10,7 +10,7 @@ import { Fragment as Fragment_1, Slot as Slot, Image as Image, HtmlEmbed as Html
export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
export const lastPublished = "2025-12-05T12:38:39.797Z";
export const lastPublished = "2025-12-05T13:16:43.550Z";
export const siteName = "Inasa Healthcare";

4
app/__generated__/[about]._index.tsx generated
View File

@ -10,7 +10,7 @@ import { Link as Link, Body as Body } from "@webstudio-is/sdk-components-react-r
export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
export const lastPublished = "2025-12-05T12:38:39.797Z";
export const lastPublished = "2025-12-05T13:16:43.550Z";
export const siteName = "Inasa Healthcare";
@ -314,7 +314,7 @@ className={`w-element c1fw0cv2 c13twaxx c1asj7ri c8cfypq c10jyxyw c1jadkev ckmg8
</div>
</section>
<HtmlEmbed
code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"about\");\n debugger;\n const framer = window.framer;\n\n // Create a motion value for opacity\n const opacity = framer.motion.value(0);\n\n // Define the animation\n const animation = framer.motion.animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
code={"<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"about\");\n debugger;\n const {animate} = Motion\n\n // Define the animation\n const animation = animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
executeScriptOnCanvas={true}
className={`w-html-embed`} />
</Fragment_1>

4
app/__generated__/[contact]._index.tsx generated
View File

@ -10,7 +10,7 @@ import { Link as Link, Body as Body, RemixForm as RemixForm } from "@webstudio-i
export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
export const lastPublished = "2025-12-05T12:38:39.797Z";
export const lastPublished = "2025-12-05T13:16:43.550Z";
export const siteName = "Inasa Healthcare";
@ -340,7 +340,7 @@ className={`w-html-embed`} />
</div>
</section>
<HtmlEmbed
code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"contact\");\n const framer = window.framer;\n\n // Create a motion value for opacity\n const opacity = framer.motion.value(0);\n\n // Define the animation\n const animation = framer.motion.animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
code={"<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"contact\");\n debugger;\n const {animate} = Motion\n\n // Define the animation\n const animation = animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
executeScriptOnCanvas={true}
className={`w-html-embed`} />
</Fragment_1>

4
app/__generated__/[insurance]._index.tsx generated
View File

@ -10,7 +10,7 @@ import { Link as Link, Body as Body } from "@webstudio-is/sdk-components-react-r
export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
export const lastPublished = "2025-12-05T12:38:39.797Z";
export const lastPublished = "2025-12-05T13:16:43.550Z";
export const siteName = "Inasa Healthcare";
@ -355,7 +355,7 @@ className={`w-image`} />
</div>
</section>
<HtmlEmbed
code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"insurance\");\n const framer = window.framer;\n\n // Create a motion value for opacity\n const opacity = framer.motion.value(0);\n\n // Define the animation\n const animation = framer.motion.animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
code={"<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"insurance\");\n debugger;\n const {animate} = Motion\n\n // Define the animation\n const animation = animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
executeScriptOnCanvas={true}
className={`w-html-embed`} />
</Fragment_1>

4
app/__generated__/[services]._index.tsx generated
View File

@ -11,7 +11,7 @@ import { Dialog as Dialog, DialogTrigger as DialogTrigger, DialogOverlay as Dial
export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
export const lastPublished = "2025-12-05T12:38:39.797Z";
export const lastPublished = "2025-12-05T13:16:43.550Z";
export const siteName = "Inasa Healthcare";
@ -645,7 +645,7 @@ className={`w-html-embed`} />
</div>
</section>
<HtmlEmbed
code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"services\");\n const framer = window.framer;\n\n // Create a motion value for opacity\n const opacity = framer.motion.value(0);\n\n // Define the animation\n const animation = framer.motion.animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
code={"<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"services\");\n debugger;\n const {animate} = Motion\n\n // Define the animation\n const animation = animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
executeScriptOnCanvas={true}
className={`w-html-embed`} />
</Fragment_1>

27
app/__generated__/_index.tsx generated
View File

@ -11,7 +11,7 @@ import { Dialog as Dialog, DialogTrigger as DialogTrigger, DialogOverlay as Dial
export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
export const lastPublished = "2025-12-05T12:38:39.797Z";
export const lastPublished = "2025-12-05T13:16:43.550Z";
export const siteName = "Inasa Healthcare";
@ -29,9 +29,24 @@ import { Dialog as Dialog, DialogTrigger as DialogTrigger, DialogOverlay as Dial
const Script = ({children, ...props}: Record<string, string | boolean>) => {
if (children == null) {
return <script {...props} />;
}
return <script {...props} dangerouslySetInnerHTML={{__html: children}} />;
};
const Style = ({children, ...props}: Record<string, string | boolean>) => {
if (children == null) {
return <style {...props} />;
}
return <style {...props} dangerouslySetInnerHTML={{__html: children}} />;
};
export const CustomCode = () => {
return (<></>);
return (<><Script src={"https://cdn.jsdelivr.net/npm/motion/dist/motion.js"}></Script></>);
}
@ -352,7 +367,7 @@ className={`w-element c1fw0cv2 c13twaxx c1asj7ri c8cfypq c10jyxyw c1jadkev ckmg8
</div>
</section>
<HtmlEmbed
code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"about\");\n debugger;\n const framer = window.framer;\n\n // Create a motion value for opacity\n const opacity = framer.motion.value(0);\n\n // Define the animation\n const animation = framer.motion.animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
code={"<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"about\");\n debugger;\n const {animate} = Motion\n\n // Define the animation\n const animation = animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
executeScriptOnCanvas={true}
className={`w-html-embed`} />
</Fragment_1>
@ -778,7 +793,7 @@ className={`w-html-embed`} />
</div>
</section>
<HtmlEmbed
code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"services\");\n const framer = window.framer;\n\n // Create a motion value for opacity\n const opacity = framer.motion.value(0);\n\n // Define the animation\n const animation = framer.motion.animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
code={"<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"services\");\n debugger;\n const {animate} = Motion\n\n // Define the animation\n const animation = animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
executeScriptOnCanvas={true}
className={`w-html-embed`} />
</Fragment_1>
@ -915,7 +930,7 @@ className={`w-image`} />
</div>
</section>
<HtmlEmbed
code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"insurance\");\n const framer = window.framer;\n\n // Create a motion value for opacity\n const opacity = framer.motion.value(0);\n\n // Define the animation\n const animation = framer.motion.animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
code={"<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"insurance\");\n debugger;\n const {animate} = Motion\n\n // Define the animation\n const animation = animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
executeScriptOnCanvas={true}
className={`w-html-embed`} />
</Fragment_1>
@ -1034,7 +1049,7 @@ className={`w-html-embed`} />
</div>
</section>
<HtmlEmbed
code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"contact\");\n const framer = window.framer;\n\n // Create a motion value for opacity\n const opacity = framer.motion.value(0);\n\n // Define the animation\n const animation = framer.motion.animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
code={"<script>\n // Wait for the DOM to load\n document.addEventListener(\"DOMContentLoaded\", () => {\n const section = document.getElementById(\"contact\");\n debugger;\n const {animate} = Motion\n\n // Define the animation\n const animation = animate({\n from: { opacity: 0 },\n to: { opacity: 1 },\n duration: 1,\n ease: \"easeOut\"\n });\n\n // Trigger animation when the section is in view\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animation.play();\n observer.unobserve(section);\n }\n });\n },\n { threshold: 0.1 }\n );\n\n observer.observe(section);\n });\n</script>"}
executeScriptOnCanvas={true}
className={`w-html-embed`} />
</Fragment_1>