Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ClaryP

DrawSVGPlugin with Laravel

Recommended Posts

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!

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×