Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mauro1989

How to add this CDN Link into HTML

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

just stepped 5 hours ago into greensock after chasing for scrollmagic.

 

So now im at the point that it says to copy/paste the CMD link into HTML:

Im trying to figure this out and spend already 3 hours on this task.

 

Could anyone explain me step by step what to do?

 

 much appreciated.

See the Pen by learning (@learning) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

A CDN is a content delivery network: https://www.cloudflare.com/learning/cdn/what-is-a-cdn/

CDN's provide quick access to commonly used JavaScript files for people all over the world.

All of the public GSAP files are hosted on cloudfare's cdn: https://cdnjs.com/libraries/gsap

Although you can load any file individually, most people just load TweenMax which includes the most commonly used components.

 

 

The CDN link for TweenMax is

 

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

 

You just put that in your html file before any scripts you write that need any GSAP tools in order to run like

//load TweenMax for cloudfare CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

//write your own code that uses GSAP
<script>
TweenLite.to("#myDiv", 1, {x:100});
</script>

 

One of the best ways for beginners to learn is to look at some basic demos.

We have a bunch on CodePen

 

https://codepen.io/collection/ifybJ/

 

Click on any of those demos and you will see all the html, css and javascript used to make it run.

In the bottom of every Pen is the option to export a zip. 

 

CTypUs68TYqlltZ7ndy11w.png

 

You will then get a set of local files you can run. Feel free to download and investigate as many as you like.


A typical html file will look like:

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Basic Tween</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="demo">
  <div id="logo"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>

<!-- your custom javascript file -->

<script  src="js/index.js"></script>
</body>
</html>

 

As a side note, I would strongly recommend learning the basics of GSAP before getting too deep into ScrollMagic. 

 

Let us know if you have any more questions.

 

 

 

 

 

 

 

  • Like 2
Link to comment
Share on other sites

Hi Carl, 

 

thank you for your answer, it helped me a bit.

 

Now i managed to copy my website Html into Codepen and im trying to figure out how to edit it by adding some random pens i found on Codepen.

This is my website on Codepen 

See the Pen PEyNdO by dashurry (@dashurry) on CodePen

 

 

 

 

and im trying to understand where to fit this pen made by another user 

 

 

 

 

See the Pen eyKzgG by plasm (@plasm) on CodePen

 

Link to comment
Share on other sites

A pen is really not supposed to be a complete website.

Notice there are separate panels for HTML, CSS, and JavaScript so you can keep your code nicely separated.

Pens are usually for small demos. Perhaps you should look into CodePen projects for more advanced features.

I would strongly suggest you look at some other pens and read the CodePen faq and support documents. 

 

To embed a pen you just click on the "emebed" button at the bottom of the pen and it will give you various options for exporting the html.

I slapped that pen at that top of yours just to show you. I really don't think this is a good idea.

 

See the Pen GyYqaz?editors=1000 by GreenSock (@GreenSock) on CodePen

 

We have to keep our support focused on the GSAP API. Let us know if you have questions regarding animation.

Please consult CodePen support for other CodePen questions.

Thanks

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.

×