Jump to content
Search Community

Gsap CDN is not working....

Cole Kim 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

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

 

 

<html>

<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
    tlLoader
        .staggerFromTo(loadContents, 0.3,
            {y:0, autoAlpha: 0},
            {y:20, autoAlpha: 1, ease:Back.easeInOut},
            0.05    
        )
        .fromTo(loader,0.3,
            {autoAlpha: 1, scale: 1.3},
            {autoAlpha: 0, scale: 1, ease:Power0.easeNone},
            0.9
        );

}
start();

 

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>
<!-- NOW ADD YOUR FILE -->
<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

 

image.thumb.png.56cae17b4b0a95bbd3924832690ae262.png

 

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

bodymargin10px#logowidth180px
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>
<html>
<head>
  <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">
</head>

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

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

</html>

 

  • 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>
</body>
</html>

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.registerPlugin(ScrollTrigger);


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

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...