Jump to content
GreenSock

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

How to properly arrange script for greensock in html

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 post
Share on other sites

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

×