Question:
come from Framer but needed a better option for a client that will need E-Commerce functionalities. I have, on his website, this custom code component that is fixed to the back of the page and loads an animation as I scroll through the website. The code is some JS with Reach Libraries.
Product:
Wix Studio
What are you trying to achieve:
I want to have this animation that will unfold as I scroll the page, like in the following link: Petit Monsieur – Framer - 11 November 2024 | Loom
What have you already tried:
I tried to the follow the following article but with little success Coding a More Robust Custom Element
Additional information:
This is the code that I currently use on Framer:
import { useEffect } from “react”
export default function AnimatedLogo({ width = “100%”, height = “100%” }) {
useEffect(() => {
const path = document.querySelector(“.cls-1”) // Target the path with cls-1 class
const pathLength = path.getTotalLength()
// Set initial styles for drawing effect
path.style.strokeDasharray = pathLength
path.style.strokeDashoffset = pathLength
// Scroll event to trigger the drawing effect
const onScroll = () => {
const scrollPercentage =
(document.documentElement.scrollTop + document.body.scrollTop) /
(document.documentElement.scrollHeight -
document.documentElement.clientHeight)
const drawLength = pathLength * (1 - scrollPercentage)
path.style.strokeDashoffset = drawLength
}
window.addEventListener("scroll", onScroll)
// Cleanup event listener on component unmount
return () => window.removeEventListener("scroll", onScroll)
}, [])
return (
<svg
width={width}
height={height}
viewBox="0 0 840.21 863.34"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<style>
{`.cls-1 {
fill: none;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 1px;
transition: stroke-dashoffset 0.5s ease;
}`}
</style>
</defs>
<g id="Calque_1">
<path
className="cls-1"
d="M8.66,478.22s-7.23-120.9,38.39-218.94,71.83-117.79,78.64-122.55,32.68-25.87,21.79,33.7-34.55,94.64-41.96,93.28,1.45-50.72,52.17-105.87c50.72-55.15,36.43,16,36.43,16,0,0-19.74,82.38-37.11,95.66s-9.19-48.68,44.94-100.77,41.1,17.77,31.4,47.9c-8.61,26.74-48.3,81.57-39.32,48,9.7-36.26,55.92-79.82,58.3-81.39s29.11-18.74,17.62,33.93-85.63,174.74-113.71,170.02C125.86,382.07,15.98,244.54,4.84,150.92c0,0-15.36-56.85,38.92-80C98.03,47.77,187.51,2.83,309.43,2.83c66.04,0-66.38,55.49-86.81,62.98s-129.02,42.79-149.79,45.05-80,7.87,46.98-41.57c126.98-49.44,195.6-45.52,213.45-45.02s23.15,5.79,25.87,8.85,12.6,40.85,3.4,68.09-20.77,25.87-18.72,2.72c2.04-23.15,23.49-49.02,36.43-61.62,12.94-12.6,36.43-12.26,45.62,5.79,9.19,18.04,42.89,93.36,40.31,162.35-1.24,33.22,5.56,21.99-66.18,72.88-71.74,50.89-241.7,154.21-279.49,187.91s-47.32,32-36.77,55.49,87.15,168.51,92.26,181.11,24.85,65.36,30.3,70.47,11.23,6.47,37.45-13.96,44.26-39.15,11.91-23.49-143.66,74.55-166.81,98.38c-23.15,23.83-5.11,24.51,32.34,17.02,37.23-7.45,192.95-60.26,208-65.7s13.96,2.72,7.49-43.23c-6.47-45.96-65.02-289.7-65.02-289.7,0,0,248.68,240.64,251.11,243.06s2.43,2.17,11.87-8.04,163.23-228.55,163.23-228.55l131.23,4.26-198.98-115.91s-158.98,148.09-181.28,183.06c-20.09,31.51,19.98,11.89,49.16-18.93,36.44-38.49,70.08-87.28,72.12-94.43,0,0,26.64-41.11-.6-93.87s-100.19-47.99-100.19-47.99"
/>
</g>
</svg>
)
}