Orien

Hi , Thank you a lot !! it works , i'm really not familiar with how the start and end points works, i just have to figure out why it does not work on multiple element on the same page but you helped me a lot , thanks again

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> ); };

I added a codepen demo in my issue but the link won't appear , here is the demo (the expected result can be seen on scroll) : DEMO

Hello everyone, I'm new to GSAP and I'm trying to create a "Sticker" component in Next.js based on this demo in Codepen (you can see the effect when you scroll): https://codepen.io/benouaghremhamza/pen/zYJJYxJ. However, I'm having some trouble with the image not showing up. I noticed that when I delete the mask attribute from the image tag, the image appears correctly. I've tried to debug the issue but I'm not sure what's causing it. Could anyone please help me troubleshoot this problem? I would greatly appreciate any suggestions or advice you could offer. Thank you in advance for your assistance!. Here's my component for more context: 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> ); };