Jump to content
Search Community

how to add the gsap code to my own html site

nikhilSarojam test

By nikhilSarojam
in GSAP

Moderator Tag
 Share

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

Sahil test

Sahil

Posted
Posted

You can include GSAP to your html site just like how you would any other JavaScript file.

 

Create a js folder at the root and place your javascript files in it, and reference them in HTML as following snippet.

  

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="default.css" />    
</head>

<body>
    <div id="container">
        <div class="box one"></div>
    </div>
	<script src="js/TweenMax.js"></script>
    <script src="js/Draggable.js"></script>
    <script src="js/ThrowPropsPlugin.js"></script>
    <script src="js/default.js"></script>
</body>

</html>

 

Because they are being included in the body tag you don't need to use any event to check if page has loaded or DOM is ready to be manipulated. Any code you write in default.js will run when page loads.

 

https://developer.mozilla.org/zh-TW/docs/Web/Events/DOMContentLoaded

 

http://learn.jquery.com/using-jquery-core/document-ready/

  • Like 4
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...