How can i get this svg animation done

[Orien]

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): . 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>

  );

};

See the Pen zYJJYxJ by benouaghremhamza (@benouaghremhamza) on CodePen

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

I noticed you're not doing proper cleanup in your React useLayoutEffect(). Since React 18 double-invokes that in strict mode, you might be inadvertently creating multiple conflicting animations/ScrollTriggers. gsap.context() is your new best friend in React because it makes cleanup so easy. I'd HIGHLY recommend reading this: 

 

As for the minimal demo, please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here are some React starter templates that you can fork

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Orien]

On 3/19/2023 at 9:58 PM, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

I noticed you're not doing proper cleanup in your React useLayoutEffect(). Since React 18 double-invokes that in strict mode, you might be inadvertently creating multiple conflicting animations/ScrollTriggers. gsap.context() is your new best friend in React because it makes cleanup so easy. I'd HIGHLY recommend reading this: 

 

As for the minimal demo, please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here are some React starter templates that you can fork

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

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

[Cassie]

Heya! Bit confused here - this demo is working a ok for me, 

 

Do you need help with this demo or another one?

[Orien]

21 hours ago, Cassie said:

Heya! Bit confused here - this demo is working a ok for me, 

 

Do you need help with this demo or another one?
 

 

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

 

[Rodrigo]

Hi,

 

There are a few issues here. First the start and end points are kind of weird, if you check the example you'll see that the end marker is above the start marker, but it kind of still works. Second you're not using GSAP Context and doing proper cleanup in your effect hook, which is especially problematic using from instances. In React strict mode the effect hooks have a double call as explained here:

 

https://greensock.com/docs/v3/GSAP/gsap.context()

 

This seems to work as expected:

https://stackblitz.com/edit/vitejs-vite-oqdyq4?file=src%2FApp.jsx&terminal=dev

 

Hopefully this clears things up.

Happy Tweening!

[Orien]

On 3/22/2023 at 3:32 PM, Rodrigo said:

Hi,

 

There are a few issues here. First the start and end points are kind of weird, if you check the example you'll see that the end marker is above the start marker, but it kind of still works. Second you're not using GSAP Context and doing proper cleanup in your effect hook, which is especially problematic using from instances. In React strict mode the effect hooks have a double call as explained here:

 

https://greensock.com/docs/v3/GSAP/gsap.context()

 

This seems to work as expected:

https://stackblitz.com/edit/vitejs-vite-oqdyq4?file=src%2FApp.jsx&terminal=dev

 

Hopefully this clears things up.

Happy Tweening!

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

[Rodrigo]

Hi,

 

I recommend you to take a good look at the ScrollTrigger Docs and play with the plugin, starting with basic stuff first:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Also this video might provide a few solid concepts going forward:

 

Happy Tweeing!