Hey , thanks a lot for your attention , The demo is working perfectly , it's the React component i tried to create to do the same effect that is not working and i really struggle to find why , here's the component i created to compare with , thanks again :
import React, { useLayoutEffect, useRef } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
export const Sticker = ({ href, width, height }) => {
const svgRef = useRef<SVGSVGElement | null>(null);
useLayoutEffect(() => {
if (svgRef.current === null) return;
const maskId = svgRef.current.querySelector("#wobble")
gsap.from(maskId, {
xPercent: 100,
yPercent: 100,
ease: "power2.out",
duration: 1.5,
scrollTrigger: {
trigger: svgRef.current,
start: 'center 110%',
end: '10%',
scrub: 1,
},
});
}, []);
return (
<svg ref={svgRef} viewBox="0 0 800 1000" width={width} height={height}>
<image
opacity="0.65"
mask="url('#myMask')"
preserveAspectRatio="xMidYMid slice"
href={href}
height="100%"
width="100%"
/>
<mask id="myMask">
<path
id="wobble"
d="M53.48-414.83C-36.82-373-33.76-278.17-19.91-194c12.17,74,66.56,136.46,2.05,205.61s-109.6,66-153.69,147.16,31,143.15-55,230.15-274,14.62-267,206S-750.66,726.14-680.2,819.76c75,99.68,487.9,207.62,632,282.55,342.19,177.9,764,148.24,902.86-42.68C994.14,867.89,1031.26,327.21,819.11-35.12,647.45-328.3,300.19-406.44,276.48-428.27,223.48-477.07,92.55-432.94,53.48-414.83Z"
fill="black"
/>
</mask>
</svg>
);
};