DrawSVGPlugin with Laravel

[ClaryP]

Hello and my apologies in advance if this has been answered; couldn't find anything in the forum. I recently bought the members-only GSAP pack in hopes of integrating DrawSVGPlugin into a Laravel project. I don't want to belabor everything I've tried so far so if anyone has done this successfully, please feel free to reach out. Thank you!

[GreenSock]

Welcome to the forums (and Club GreenSock), @ClaryP! I'm completely unfamiliar with Laravel but GSAP can be used pretty much anywhere JavaScript runs so I can't imagine it'd be a problem. Do you have a reduced test case maybe? The simpler the better. And you've got an SVG path that you want to draw in, right? 

[ClaryP]

Hi, Jack! Thank you for the reply. It appears gsap is loading fine, but the issue appears to be with the members-only modules (namely, DrawSVGPlugin). If you're not familiar with Laravel, this might be a little tricky...Basically, I'm calling my admin.js script in my homepage blade file (which, in Laravel, is where the homepage html code belongs), and am also calling the animation js file which is where I've got the action bits for DrawSVGPlugin and SplitText. Both appear as proper links in the page source in dev tools. 

 

The only thing I can think of is that there's something wrong with the register code in the admin.js file. Here's the admin.js code in its entirety:

 

import { gsap } from "gsap/dist/gsap";

import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin";
gsap.registerPlugin(DrawSVGPlugin);

 

Thanks again! Have seen a few folks who are also trying to integrate members-only modules with Laravel so hopefully I can figure it out and share it with you all

[ClaryP]

Resolved! It works beautifully

 

In case anyone else has the same issue, the key in Laravel (particularly when using React) is to make sure you've properly referenced your component in resources/js/app.js. Mine contained a spelling error. Fixed it and everything works as expected now.