Jump to content
Search Community

Using Club GreenSock plugins on a live website

JonnyHollis test
Moderator Tag

Recommended Posts

Hi,

 

We've bought the Shockingly Green membership, downloaded the plugins and followed the instructions but there appears to be some gaps ie a massive gap for anyone not used to using NPM on a live website.

Do I need to somehow find a way to install Node and NPM on our development server? And then do the same on the live server? I really can't fathom this out from your installation guide. The instructions seem to be designed purely for use in VS Code. I've got a huge website waiting to go live. I've no idea whether I can get NPM working on it and then it's going on an AWS server. Loads of hoops and zero explanation. Unless I'm missing something? Sorry if I sound frustrated. That's probably because I am.

I've built the animations. I've got all the free stuff working fine on the development website. There's just the text animations that use your TextPlugin.

Obviously, no problems in CodePen.

The development server gives me this error:

Uncaught ReferenceError: SplitText is not defined

I've got the TextPlugin loading above the GSAP animation code. GSAP and everything else loads in the header. All the scripts are there. The GSAP script triggers on page load.

 

As soon as I add the register SplitText line, the animations fail.

Please don't tell me I need to run NPM on these servers. I've got FTP access. That's it.
 

Link to comment
Share on other sites

Hey Johnny and welcome to the GreenSock forums. Sorry for the trouble you're facing.

 

10 minutes ago, JonnyHollis said:

Do I need to somehow find a way to install Node and NPM on our development server? And then do the same on the live server? I really can't fathom this out from your installation guide.

Not at all! You're welcome to host the Club GreenSock files on your dev and live sites. We just don't want the Club GreenSock files to be available in places like GitHub. Using Node or NPM doesn't remove the need for the files to be on the sites they're developing. 

 

10 minutes ago, JonnyHollis said:

The instructions seem to be designed purely for use in VS Code.

That's funny because I made the videos using Atom. And NPM/Node etc. are usable in other editors besides VSCode so I'm confused where this is coming from.

 

10 minutes ago, JonnyHollis said:

I've got a huge website waiting to go live. I've no idea whether I can get NPM working on it and then it's going on an AWS server. Loads of hoops and zero explanation. Unless I'm missing something? Sorry if I sound frustrated. That's probably because I am.

It seems that you only watched the video about installing GSAP via NPM/yarn/modules. You should watch the "install GSAP 3 via a <script> tag" video on the install page  inyour case.

 

10 minutes ago, JonnyHollis said:

The development server gives me this error:

Uncaught ReferenceError: SplitText is not defined

You can't use the same URLs for the Club GreenSock plugins that CodePen uses. Those are made specifically for sites like CodePen. To use the Club files on your own site, simply download GSAP from the GreenSock website (while you're logged into a Club GreenSock account) and upload the Club files to your development/live site. We show how to do that in the install videos and talk about how to do so on the install page.

  • Like 2
  • Haha 1
Link to comment
Share on other sites

19 minutes ago, JonnyHollis said:

I've got the TextPlugin loading above the GSAP animation code.

 

19 minutes ago, JonnyHollis said:

As soon as I add the register SplitText line, the animations fail.

Just to be clear. The text plugin and SplitText are two different things.

 

You're also using the files from either the 'minified' or 'src' directories, correct?

  • Like 2
Link to comment
Share on other sites

Thanks for the timely response.

Having failed to get the plugin working locally and on the dev server, I think I've decided that it's NPM, so I'm very glad I can do this using HTML.

...and you've clearly spotted one bug. Probably THE bug.

I'm currently playing about with the TextPlugin from the "src" directory.

To use SplitText, which plugin do I need to install? I haven't got a SplitText file in that directory.

I'm the same person. I'm logged into multiple browsers.

 

Link to comment
Share on other sites

  • 3 years later...
  • 4 weeks later...

It seems like you're encountering challenges with installing and using NPM, particularly in the context of deploying your website.

 

Check the file structure on the server to ensure that all files are uploaded in the correct directories. If you're still encountering the "Uncaught ReferenceError: SplitText is not defined" error, verify that the SplitText file is correctly included, and there are no typos in your code.

If you want connecting to ftp on Mac to your servers and find dealing with NPM on live servers cumbersome, an alternative approach could be to use an FTP client like Commander One to manually upload the necessary files.

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.
×
×
  • Create New...