Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Cole Kim

Gsap CDN is not working....

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

I put the following CDN code in my HTML file and then executed TimelineLite function in javascript.




<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TimelineMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js"></script>


<My javascript code>

start = ()=> {

    let loader = document.getElementById('loading'),
    loadContents = document.getElementsByClassName('loading_content'),
    tlLoader = new TimelineMax();
    // Loader Timeline
        .staggerFromTo(loadContents, 0.3,
            {y:0, autoAlpha: 0},
            {y:20, autoAlpha: 1, ease:Back.easeInOut},
            {autoAlpha: 1, scale: 1.3},
            {autoAlpha: 0, scale: 1, ease:Power0.easeNone},



Then... the following error appeared in Console.


스크린샷 2019-04-27 오후 5.02.16.png


Why is this happening?


I guess I add the CDN code incorrectly, so I change to another CDN


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>


and tried to use changed TimelineMax to TimelineLite in my javascript code.


but this problem is still happening now.


plz.. help me

  • Like 1
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


The CDN links are working for me. Perhaps the issue is the order the tags are placed. Remember to put the tag with the href to your code after the tags with the CDN links.


If your code is in a file called myScript.js, then you should add the tag for that after the GSAP files and for that matter after every other library or framework you use in your site:


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="js/myScript.js"></script>


Happy Tweening!!!!

  • Like 5
Link to comment
Share on other sites

  • 9 months later...
On 4/27/2019 at 7:30 AM, Rodrigo said:

I have also trying to learn GSAP. I have copy and pasted example code from a lot of different blog/sites.

is there a very simple example that we can copy and paste to see confirm everything is installed correctly? I have tried to you NPM, CDN ...and even copy and pasted code that I see works on examples, but I can't recreate. I don't want to give up on GSAP, so any simple info would be nice.


Link to comment
Share on other sites

Sorry to hear about the trouble, @SamuriCity. Have you gone through the "Getting Started" guide? And have you checked the Installation page of the docs? That even has an "Install Helper" that writes the code for you. It should be pretty straightforward, so if you're still having trouble it'd be super helpful if you could provide a reduced test case so that we can see exactly what you're doing and what you may be missing. 


Hang in there! I'm sure we can get you up and running and you'll be enjoying animation superpowers. :)


Link to comment
Share on other sites




I can get the logo up, I am new to html so I don't know if I needed the "broiler plate" I didn't see one on the example code , and it worked...so I just copied what I seen in the HTML section. I really don't care what the animation does, I just want to see if I installed GSAP correctly. Also I didn't see in Code Pen a "CDN" is that something that CODE PEN doesn't need?


CSS File


/* Global styles come from external css 

See the Pen JGaKdQ* by GreenSock (@GreenSock) on CodePen

gsap.from("#logo", {duration: 3, x: 300, opacity: 0, scale: 0.5});



So I just copied all the code and confirm, it does not do the same animation that is found on GSAP with the exact same code. Just want to know what I'm missing , can you not bring code directly from codepen into visual studio code?


Thank you .

Link to comment
Share on other sites

Sorry, but I'm kinda lost. I have no idea which instructions you're following, what codepen you're looking at, and your screen shot only showed a tiny portion of the code and was cut off. You didn't answer my questions either - did you go through the "getting started" guide and the installation page? 


If you're totally new to HTML, CSS, and JavaScript, I'd strongly recommend you get familiar with the basics of those first before you try anything with GSAP. Otherwise I think you're just gonna get confused and overwhelmed. 

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

If you are still facing the problem with the "where to place script tag" just place it anywhere and use "defer" in it, it will work without worries. 

for example:  

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenLite.min.js" defer ></script>
Link to comment
Share on other sites

On 2/8/2020 at 5:21 PM, SamuriCity said:

gsap.from("#logo", {duration: 3, x: 300, opacity: 0, scale: 0.5});


First, this is using the new GSAP3 syntax, which won't work with version 2.x (which appears to be what you're importing).


As @GreenSock said, the Getting Started page is super helpful. But if you're super new to HTML and CSS, learning JS is going to be pretty overwhelming on top of that. It's important, from a learning and understanding standpoint, to have a good knowledge of the basics of HTML and CSS down before you dive into learning (JS and) GSAP.

That said, to get started, you're HTML file should look similar to this:

<!DOCTYPE html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- custom css -->
  <link rel="stylesheet" href="style.css" type="text/css">

  <!-- stuff on your website --> 
  <img src="logo-man.svg" /> 

<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<!-- custom js -->
<script src="scripts.js"></script>



  • Like 6
Link to comment
Share on other sites

  • 7 months later...

hi! I'm having an issue getting gsap to run in my code. I've imported the CDN script above my scripts.js,

	<!-- GSAP -->

    <script src=“https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js”></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
    <!-- JS -->
    <script src="script.js"></script>

and in my script.js I've got a super basic animation that isn't happening in my live load and I'm not sure why. I even installed locally and it is still not doing the stuff ..


gsap.to('.ball', {
    duration: 1, x: 300,

🤔 am i missing something silly? I've used this before too

Link to comment
Share on other sites

Hey @brennamacquarrie. I don't see anything wrong with the code that you've provided. Maybe your script.js file isn't being reached? What does the console say? If that doesn't help you figure it out, can you please create a full demo of the issue and share that with us?

Link to comment
Share on other sites

That pen works just fine. Are you saying that it doesn't work for you?

Link to comment
Share on other sites

yeah. this is frustrating (only getting back to it now), it's not working in vscode. but i can see that it works here. I'll spend some more time with it but it's defo confusing me.

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.