- update framer motion scripts

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

View File

@ -1,16 +1,16 @@
{ {
"build": { "build": {
"id": "b2fe0b81-fe34-4f6a-bd68-efa6c4be59c2", "id": "d1355bdf-5c5f-43e0-b303-63bbe781da27",
"projectId": "363652e3-9846-4534-acdf-9b2b3c66eec0", "projectId": "363652e3-9846-4534-acdf-9b2b3c66eec0",
"version": 3200, "version": 3257,
"createdAt": "2025-12-05T12:38:39.797+00:00", "createdAt": "2025-12-05T13:16:43.55+00:00",
"updatedAt": "2025-12-05T12:38:39.797+00:00", "updatedAt": "2025-12-05T13:16:43.55+00:00",
"pages": { "pages": {
"meta": { "meta": {
"siteName": "Inasa Healthcare", "siteName": "Inasa Healthcare",
"contactEmail": "inasahealthcare@gmail.com", "contactEmail": "inasahealthcare@gmail.com",
"faviconAssetId": "9f21d5d9649e25cc357333e82a693d0abc56d6ae0466834542e33517997ecc16", "faviconAssetId": "9f21d5d9649e25cc357333e82a693d0abc56d6ae0466834542e33517997ecc16",
"code": "" "code": "<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>"
}, },
"compiler": { "compiler": {
"atomicStyles": true "atomicStyles": true
@ -28708,7 +28708,7 @@
"instanceId": "r-znm5ELAYy0FXTViUlnW", "instanceId": "r-znm5ELAYy0FXTViUlnW",
"name": "code", "name": "code",
"type": "string", "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", "instanceId": "VJgLL4H1vzcr6iUQ4EmYk",
"name": "code", "name": "code",
"type": "string", "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", "instanceId": "3uk4jqZSxYBVymG0UHX47",
"name": "code", "name": "code",
"type": "string", "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", "instanceId": "ctpDuAXXXjro4xY_qTIjy",
"name": "code", "name": "code",
"type": "string", "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>"
} }
], ],
[ [

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 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"; export const siteName = "Inasa Healthcare";

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 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"; export const siteName = "Inasa Healthcare";
@ -314,7 +314,7 @@ className={`w-element c1fw0cv2 c13twaxx c1asj7ri c8cfypq c10jyxyw c1jadkev ckmg8
</div> </div>
</section> </section>
<HtmlEmbed <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} executeScriptOnCanvas={true}
className={`w-html-embed`} /> className={`w-html-embed`} />
</Fragment_1> </Fragment_1>

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 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"; export const siteName = "Inasa Healthcare";
@ -340,7 +340,7 @@ className={`w-html-embed`} />
</div> </div>
</section> </section>
<HtmlEmbed <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} executeScriptOnCanvas={true}
className={`w-html-embed`} /> className={`w-html-embed`} />
</Fragment_1> </Fragment_1>

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 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"; export const siteName = "Inasa Healthcare";
@ -355,7 +355,7 @@ className={`w-image`} />
</div> </div>
</section> </section>
<HtmlEmbed <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} executeScriptOnCanvas={true}
className={`w-html-embed`} /> className={`w-html-embed`} />
</Fragment_1> </Fragment_1>

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 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"; export const siteName = "Inasa Healthcare";
@ -645,7 +645,7 @@ className={`w-html-embed`} />
</div> </div>
</section> </section>
<HtmlEmbed <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} executeScriptOnCanvas={true}
className={`w-html-embed`} /> className={`w-html-embed`} />
</Fragment_1> </Fragment_1>

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 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"; 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 = () => { 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> </div>
</section> </section>
<HtmlEmbed <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} executeScriptOnCanvas={true}
className={`w-html-embed`} /> className={`w-html-embed`} />
</Fragment_1> </Fragment_1>
@ -778,7 +793,7 @@ className={`w-html-embed`} />
</div> </div>
</section> </section>
<HtmlEmbed <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} executeScriptOnCanvas={true}
className={`w-html-embed`} /> className={`w-html-embed`} />
</Fragment_1> </Fragment_1>
@ -915,7 +930,7 @@ className={`w-image`} />
</div> </div>
</section> </section>
<HtmlEmbed <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} executeScriptOnCanvas={true}
className={`w-html-embed`} /> className={`w-html-embed`} />
</Fragment_1> </Fragment_1>
@ -1034,7 +1049,7 @@ className={`w-html-embed`} />
</div> </div>
</section> </section>
<HtmlEmbed <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} executeScriptOnCanvas={true}
className={`w-html-embed`} /> className={`w-html-embed`} />
</Fragment_1> </Fragment_1>