Jump to content
Search Community

How to implement GSAP along with bonus content in Webflow project

johncolumbo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello everyone, 

 

I've been using Webflow for my projects recently and need to be able to use GSAP along with the bonus content from the "Shockingly Green" plan (specifically CustomWiggle) in a project. 

 

Has anyone successfully implemented GSAP along with the Club Bonus content in a Webflow project and if so, how? 

 

Thank you.

 

 

Link to comment
Share on other sites

Hi,

 

I don't have any experience with WebFlow, but I assume it would allow you to add any external JavaScript files of your choosing. 

You should be able to add TweenMax.min.js and CustomEase.min.js just as you would any other file.

 

A quick search of the WebFlow forum shows: https://forum.webflow.com/t/using-external-scripts/31220

 

I'm guessing you'll get more detailed help from the WebFlow team. I'm confident it won't be that hard as you would use GSAP just as you would any other third party js library.

  • Like 2
Link to comment
Share on other sites

Hello Carl, 

 

Thanks for the swift reply. 

Sure, I can add the CDN code to any page in Webflow, however the CustomWiggle part of GSAP is only downloadable, so would I just inject the code from the files since I cannot upload a .js file to webflow? 

Link to comment
Share on other sites

  • 7 months later...

Hi John, you can change the js file to a .txt and upload to webflow. you can then call that txt file in a script tag. Just make sure you include it as type="text/javascript" as in 

<script type="text/javascript" src="webflow-upload-url.txt"></script>
  • Like 2
Link to comment
Share on other sites

  • 11 months later...

I was able to get this working by going into the files downloaded from my GSAP membership and copying and pasting all of the code from the needed minified .js library files I wanted to use into the site settings/custom code/footer code section of the project in Webflow. See attached photos for more info. 

exampleUsage3.png

exampleUsage2.png

files.png

ExampleUsage1.png

  • Like 1
Link to comment
Share on other sites

9 hours ago, johncolumbo said:

I was able to get this working by going into the files downloaded from my GSAP membership and copying and pasting all of the code from the needed minified .js library files I wanted to use into the site settings/custom code/footer code section of the project in Webflow. See attached photos for more info. 

exampleUsage3.png

exampleUsage2.png

files.png

ExampleUsage1.png

Great! This works! Thank you John

  • Like 1
Link to comment
Share on other sites

Thanks for sharing that solution, @johncolumbo! I see in your footer you're loading GSAP 3 which is great but the other files you show (TweenLite, etc.) are from the old version of GSAP. I hope you're not loading both because then you'd be loading extra resources for no reason and (if you're loading both on a page) it could cause issues. 

Link to comment
Share on other sites

3 hours ago, ZachSaucier said:

Thanks for sharing that solution, @johncolumbo! I see in your footer you're loading GSAP 3 which is great but the other files you show (TweenLite, etc.) are from the old version of GSAP. I hope you're not loading both because then you'd be loading extra resources for no reason and (if you're loading both on a page) it could cause issues. 

 

Thanks @ZachSaucier. My screenshots were from two different projects, so I'll check on that. 

Link to comment
Share on other sites

  • 1 year later...

I wanted to load the smoothscroll libary into webflow like this example but the code from the smoothscroll libary is to long. Does anyone else have an idea how I can let that work?

On 11/4/2020 at 12:09 AM, johncolumbo said:

I was able to get this working by going into the files downloaded from my GSAP membership and copying and pasting all of the code from the needed minified .js library files I wanted to use into the site settings/custom code/footer code section of the project in Webflow. See attached photos for more info. 

exampleUsage3.png

exampleUsage2.png

files.png

ExampleUsage1.png

 

Link to comment
Share on other sites

  • 2 months later...

I am having lots of problems with this also.
I believe the issue is related with Webflow and not with GSAP library as my Codepens are working ok 

 

I am working for a company with a GSAP Shockingly green plugin
I have issues with TextPlugin library, I have in console error "Uncaught ReferenceError: SplitText is not defined"

I believe the issue is related with the way I call the library. Actually I have the TextPlugin uploaded to a CDN but my issue persist

 

Also I should say Webflow has some limitations:
10.000 characters code for each embed

There are three places where you can add Custom Code:

  •  Project Settings - Custom Code

Add code at the end of the <head> tag:
Add code before </body> tag:

  • Each Page Code

Inside <head> tag
Before </body> tag

  •  Custom Embed Code

I tried with both:
<script  src="whateverCDNurl/src/TextPlugin.js"></script>
    <script type="module" src="whateverCDNurl/src/TextPlugin.js"></script>
But my error persist

Link to comment
Share on other sites

This should be easier 🤦

 

Ok, as you said, if I go to greensock.com/install and I want to use GSAP SplitText, I have this message:

 

image.png.38577a99fd92b3e709171d14d9bfa178.png

 

And then they say:

<!--
SplitText.min.js is a Club GreenSock perk which is not available on a CDN. Download it from your GreenSock account and include it locally like this:

<script src="/[YOUR_DIRECTORY]/SplitText.min.js"></script>

 

So, for this case I cannot use CDN

The problem is this: We can not upload .js files to Webflow, that is the main problem

 

I tried it converting the .js file to a .txt and uploading it as an asset, so I call it in the script. I had the error:

Uncaught SyntaxError: Cannot use import statement outside a module
(index):29 Uncaught ReferenceError: SplitText is not defined
    at (index):29:21

type="module"

 

Also I tried to copy and paste the code from the .js but it is not working

 

 
 

 

 

Link to comment
Share on other sites

Ah, now I understand.

Yeah, to do that you have to setup a server to load the files from and make sure that only your domain can load the files from that link. I've never done this so I don't really know how to go about it.

Link to comment
Share on other sites

I don't know what a proxy is in this context.

But here's a webflow forum thread about this - https://discourse.webflow.com/t/implementing-greensock-gsap-club-member-bonus-plugins/82427/2

 

'I uploaded the assets to my CDN (AWS, digital ocean spaces, etc) and they set a referrer policy to only allow loading from the Webflow project URL.'

Your CDN/Hosting provider will know how to sort out the referrer policy. Hope this helps!

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