Jump to content
Search Community

How to properly arrange script for greensock in html

irvy test
Moderator Tag

Go to solution Solved by PointC,

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 am having issues with my Atom editor and my code. I am used to codepen, but I decided to stray away from it and use an editor right on my laptop. I am trying to use GreenSock and I honestly cannot get anything to work. I'm new at it and I understand how to do certain things while I looked up the documentation, but I cant get anything to work. I am very confused as to the arrangement of scripts if I am even doing it correctly. I made a mockup tryout from a tutorial here, but I cant get a simple animation working even if the code if practically from here.

 

any help will be appreciated.

 
 
<!DOCTYPE html>
<html>

<head>
    <link type="text/css" rel="stylesheet" href="pathTo/stylesheet.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="pathTo/script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
</head>

<body>
    <div id="box" class="box green"></div>
</body>

</html> 
.box {
  width:50px;
  height:50px;
  position:relative;
  border-radius:6px;
  margin-top:4px;
  display:inline-block
}

.green{
  background-color:#6fb936;
}

var obj = document.getElementById('box');
TweenMax.to(obj, 1.5, {width:100});

 

Link to comment
Share on other sites

  • Solution

Hi irvy  :)

 

Welcome to the GreenSock forum.

 

The order of the scripts can be an issue. I'm assuming your tween creation is in your script.js file? Please try loading TweenMax before that script. The other issue could be that you're loading the scripts before the box element so they're trying to tween an element that isn't there yet. You can load the scripts before the closing body tag and/or you can read about making sure the DOM is ready. Here's some info about jQuery's .ready() method.

 

https://api.jquery.com/ready/

 

Happy tweening.

:)

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