Using Club GSAP in Codesandbox/Webflow

[claudialn]

Hey guys, I'm relatively new to GSAP and using custom code (for Webflow). I've used GSAP core in Codesandbox pretty easily before, but I've joined club GSAP and feel like a noob 🤣 I'm studying front end dev at the moment but this is for a project that's due sooner than I can finish it so hoping the GSAP community can help!

 

Basically I'm trying to set up the scramble text plugin. I've uploaded three files (from the "src" folder, not sure if this is correct); ScrambleTextPlugin.js, strings.js and TextPlugin.js, idk why at some point in the 800 videos and articles I read I wound up with these. In my script.js file I'm importing the plugin from the gsap folder within the project, then registering it. 

 

I'm trying to scramble text on hover, this is the current config but it's not working in Webflow (I've linked the Codesandbox script in Webflow for this script.js file only, not sure if I need to link the gsap files too?): 

import { gsap } from "gsap";
import { ScrambleTextPlugin } from "./gsap/ScrambleTextPlugin.js"; // Adjust the path as needed

gsap.registerPlugin(ScrambleTextPlugin);

const scrambler = document.querySelector(".scramble-text");

if (scrambler) {
  scrambler.addEventListener("mouseenter", () => {
    gsap.to(scrambler, {
      duration: 0.5,
      scrambleText: {
        text: scrambler.textContent,
        chars: "upperCase",
      },
    });
  });

  scrambler.addEventListener("mouseleave", () => {
    gsap.to(scrambler, {
      duration: 0.5,
      scrambleText: {
        text: scrambler.textContent,
      },
    });
  });
}

Any help would be greatly appreciated.

[Rodrigo]

Hi,

 

Since you're using Webflow, you can easily create a codepen demo, it'll work in the same way webflow does, so there is no need for codesandbox in this case.

 

You can fork this demo that loads all the GSAP Plugins in order to create a demo that clearly illustrates the issue you're having:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!

[claudialn]

Hey Rodrigo thanks for your help! I'm using CodeSandbox as CodePen doesn't work as a js dev environment for Webflow/host external JS files (pretty sure). Thanks for sharing the file! Much appreciated

[Cassie]

Heya! Do you have a link to the codesandbox pal? I can take a look for you

 

From a glance - your imports are using the main GSAP package. If you want to use the club plugins on codesandbox you'll need to use the trial package. 

https://gsap.com/resources/trial/

 

BUT - the trial package only works on certain domains (not including webflow) so if you're just using codesandbox as a way to push code to webflow (? I'm guessing here, I don't really understand the entire Webflow ecosystem) you won't be able to see your code on webflow, you'll get an error screen.
 

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

/* The following plugin is a Club GSAP perk */
import { ScrambleTextPlugin } from "gsap-trial/dist/ScrambleTextPlugin";


gsap.registerPlugin(ScrambleTextPlugin);

 

It would be great if you could link me to a tutorial or explain what it is you're doing with codesandbox and webflow together so I can help to make this smoother.

 

 

 

[claudialn]

Hey Cassie! Thanks for your reply—been watching you on Youtube so much lately I feel like I'm fangirling 🤣 yep I use CodeSandbox to push code to Webflow, I'm still new to JS and code in general so I'm struggling to communicate this properly, have put it to the WF community too.

 

After messing around some more I think I've figured it out, but in doing so I realized I need to host the club plugins somewhere that isn't CodeSandbox because the sandbox is public (and setting the sandbox to private severs the connections to Webflow, too). 

 

I definitely need to keep learning JS and dev environments/NPM etc better as I can see how this is probably be very simple. Appreciate yours and Rodrigo's help on it though!

[mvaneijgen]

Seems weird to me, but it's also in our docs https://gsap.com/resources/Webflow#installation that you need to host it externally. But I don't use Webflow, so it might be normal if you're familiar with it?

 

I do have come across similar issues my self, but then it is an easy fix for me. I have my personal website which is just some HTML, CSS and JS files I host on a server and in the FTP of this website I have a folder called /public/ where I put these kinds of files I want to have publicly accessible, so I can just reference them my domain.com/public/myfile.js, but that only works if you already have a server somewhere. That said if you're serious about creating websites having a server with your personal domain on it wouldn't be that crazy. So maybe this can help you. Hope it helps and happy tweening! 

[Cassie]

Ah bless you that's very sweet of you to say! I hope the videos have helped. 

 

Quote

 

After messing around some more I think I've figured it out, but in doing so I realized I need to host the club plugins somewhere that isn't CodeSandbox because the sandbox is public (and setting the sandbox to private severs the connections to Webflow, too). 

 

I definitely need to keep learning JS and dev environments/NPM etc better as I can see how this is probably be very simple. Appreciate yours and Rodrigo's help on it though!

 

So the good news is that it's not a learning issue on your behalf. You're right, it is hard and confusing. It's unnecessarily complex/nigh impossible to use Club GSAP plugins on Webflow. The 'correct' way is to upload the club plugins to your webflow site via the assets panel, rename them as .txt files, then reference the assets in a script tag. Could you use script tags instead of using the GSAP npm package?

 

I'm not really sure how this would best translate over with the codesandbox/webflow integration but I'll chat to webflow about this and see if we can make it easier. 💚

 

If the webflow forum comes up with anything interesting pop me the link!