ScrollTrigger for Animating SVGs - issue w/ multiple SVGs

[horsmanzach]

Hello,

 

Recently I have started using GSAP more to add unique & subtle animations to various client sites. I am really enjoying it, and am hoping someone can help explain this small issue I've encountered.

 

I came across a Youtube video - link here - explaining how to animate SVGs using ScrollTrigger on top of images to make it appear as though the image is moving as the user scrolls.

 

A staging site was created to attempt to recreate this - link here . I don't know if this needs to be mentioned but one difference between my staging site and the video I am referencing is that the video author is using Webflow whereas I am using a Wordpress on my staging site.

 

I have added 2 SVGs on top of an image - one set to position: absolute at top center of the image, one set to positon:absolute at the bottom center of the image. 

 

The top one works great. Zero issues there. The bottom SVG, while it moves as you scroll, is completely distorted. It should be a similar looking soft curve to the one used at the top. Unfortunately, it looks extremely boxy and not at all like the before & after versions I created to use as the initial path and final path.

 

For context, here are the 2 SVG codes and the script I added to the body of the page:

 

Top SVG - No issues here:

 

<svg width="100%" viewBox="0 0 1444 271" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path 
      wb-element="path-to-animate"
      d="M1188 25C1520 3 1444 0.433105 1444 0.433105H0C0 0.433105 856 47 1188 25Z" 
      wb-final-path="M1310 137C1669 81.3633 1600 0 1600 0H0C0 0 950.997 192.637 1310 137Z"
      fill="#fff"
      />
  </svg>

 

Bottom SVG  - scrolls but extremely distorted:

 

<svg width="100%" viewBox="0 0 1603 239" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path 
      wb-element="path-to-animate"
      d="M0 239V0C0 0 265.834 96.3134 841.474 103.448C1417.11 110.582 1601 3.56716 1601 3.56716V239H0Z"
      wb-final-path="M1.00012 37.0769L1.00012 41.0223C7.5277 54.8358 82.2768 105.281 760 198C1567.41 308.462 1599.93 0 1599.93 0V241H1.00018L1.00012 41.0223C-0.249021 38.3789 1.00012 37.0769 1.00012 37.0769Z"
      fill="#fff"
      />
  </svg>

 

Script added to body:

<script>
const pathsToAnimate = document.querySelectorAll(
    '[wb-element="path-to-animate"]'
);

pathsToAnimate.forEach((path) => {
    const finalPath = path.getAttribute("wb-final-path");
    gsap
    .timeline({
        scrollTrigger: {
            trigger: path,
            start: "top bottom",
            end: "bottom top",
            scrub: 1
        }
    })
    .to(path, {
        attr: { d: finalPath },
            ease: "none"
        });
});
</script>

 

At this point I am not sure what to do so I am really hoping some form of guidance can be provided here.

 

Thank you, everyone!

[Cassie]

Hi there

 

I've popped this into a demo here so we can take a look and edit it

See the Pen JjqLvmW?editors=1010 by GreenSock (@GreenSock) on CodePen

 

If you copied the SVG code from web bae's video, make sure you copied it correctly.

If you didn't and you're trying to recreate this effect with your own paths, you'll probably have more luck following this article and using morphSVG. Path morphing is pretty tricky!
https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator

 

Hope this helps!

[horsmanzach]

Thanks for the reply, @Cassie

 

I can confirm that the paths added were my own SVGs that I created in Figma and exported over to the site using the process outlined in Web Bae's video.

 

I popped this same question into Chat GPT to see the options it would provide and it also mentioned the morphSVG plugin. I will need to look into this further.

 

Thanks for taking the time to review this situation.

[Rodrigo]

Hi,

 

In my experience porting SVG from figma to HTML I've seen that there could be some naming collisions between masks and clip-paths. Figma will just give a specific name based on the layer or something like that (can't remember how the figma naming convention works internally TBH), but you could have the same name in two elements and that could affect more than one path, even if those paths are in different SVG tags, so check any mask, path, gradients or anything in a <defs> tag, that could have a specific name that collides with another SVG export from figma.

 

Hopefully this helps

Happy Tweening!

[horsmanzach]

Hi @Rodrigo,

 

Thank you for this information. I should clarify my initial statement as I mentioned that I exported the SVGs to the site in my previous message which is not true. After creating the SVG in Figma, I would right click -> Copy as SVG and paste the output to insert as the initial path for the first SVG, and the final path for the second SVG.

 

After reading the article that Cassie provided, the solution mentioned there is to not export the SVG and to instead just copy and paste the path values over, which is what I was already doing.

 

Can you please clarify: is the issue you mentioned above specific to exporting SVGs, or can this issue also arise just by copying and pasting the path values over?

 

Thanks again for all this insight, it really is helpful

[Rodrigo]

I only experienced that when exporting, not when copying the values of the paths, these were full-page artwork that needed to be in the final site so copy/pasting paths wasn't going to cut it. That meant that I was also exporting, masks, gradients and other defs on each artwork, which caused the name collision I mentioned before. I just took what the designer made and ported it to HTML, nothing more, but some odd behaviour in some masks and gradients caught my attention and discovered that using the same name for a mask in different paths, that were on different SVG tags was creating an issue.

 

Happy Tweening!