drawSVG on Shopify

[dope.code]

Hi all,

I just can't get drawSVG to work on my shopify page. The scrolltrigger works just fine. However, I was trying to make a section with the drawSVG plugin but it just won't work. Anyone who can help?

[mvaneijgen]

Hi @dope.code welcome to the forum and thanks for being a club member! 

 

Personally I always start with all my animations on a place like Codepen, just to test my animation in its basic form with pure HTML, CSS and JS to make sure my animation is working as expected and not my framework or in this case platform is trowing errors. This also makes it really easy to debug, because you have a known working version and next to that you can easily share a version on places like this to ask for feedback when you get stuck.

 

Right now there is no way to help you because we don't have a minimal demo to see or edit any of the code. I would start by loggin the DrawSVGPlugin just to see if it has loaded correctly. If that is working correctly just get a simple SVG line just with two points and see if that is doing what it should. If that is all working the SVG shape you're trying to animatie probably is not exported correctly, maybe you've set your design program to export all lines to be converted to shapes? DrawSVG needs a path with a stroke to work, so make sure the elements you're trying to animate have a stroke property.

 

Again, this is just guessing at the moment, we would love to see a minimal demo so that we can help you debug, but I hope this already gets you in the right direction. Happy tweening! 

[Rodrigo]

Hi,

 

GSAP is 100% framework agnostic, so it should work in any setup you have.

 

What things you can check:

• Make sure that you're adding your scripts in the right order, that means you should add the GSAP core file first, then the plugins and finally your custom JS file:
  https://gsap.com/docs/v3/Installation?tab=cdn&module=esm&method=private+registry&tier=club&club=true&require=false&trial=true&club-plugins=DrawSVGPlugin
• Just in case register your plugin:

  gsap.registerPlugin(DrawSVGPlugin)

• Check your console on devtools to see if you're getting any GSAP related warnings or errors.

Hopefully this helps

Happy Tweening!

[dope.code]

thanks for the quick reply.

here's an example: 

See the Pen JjqRQqK by dope-code (@dope-code) on CodePen

[mvaneijgen]

With DrawSVG you target the element you want to draw, in this case you want to target the circle. I've also loaded the latest versions of the plugins 3.12.5 which is always a good first step when debugging. Hope it helps and happy tweening! 

 

See the Pen xxNRbGE?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[dope.code]

@mvaneijgen that was the crucial hint, works now. thanks! I thought the svg elements can also be sub-classes of the targeted element...