- update framer motion scripts
This commit is contained in:
parent
9a6902b4a0
commit
0ce5b12f34
@ -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>"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
|
|||||||
2
app/__generated__/$.tsx
generated
2
app/__generated__/$.tsx
generated
@ -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";
|
||||||
|
|
||||||
|
|||||||
4
app/__generated__/[about]._index.tsx
generated
4
app/__generated__/[about]._index.tsx
generated
@ -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>
|
||||||
|
|||||||
4
app/__generated__/[contact]._index.tsx
generated
4
app/__generated__/[contact]._index.tsx
generated
@ -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>
|
||||||
|
|||||||
4
app/__generated__/[insurance]._index.tsx
generated
4
app/__generated__/[insurance]._index.tsx
generated
@ -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>
|
||||||
|
|||||||
4
app/__generated__/[services]._index.tsx
generated
4
app/__generated__/[services]._index.tsx
generated
@ -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>
|
||||||
|
|||||||
27
app/__generated__/_index.tsx
generated
27
app/__generated__/_index.tsx
generated
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user