Search code examples
javascripthtmlgsaptween.js

I can't take this animated banner directly from Codepen. I think everything is properly linked so why won't it work?

I found this cool little HTML 5 banner on codepen and wanted to play around with the javascript. However when I transcribe all of the code 'as is' each into separate docs in a common folder on my desktop none of the .js functions seems to be working. I think that either there is a problem with the .js file or that it is not pulling the TweenMax.min.js library properly. I tried downloading the library and placing into a new file on my desktop but no luck. Neither the url or the file path seem to be working. Below are examples of how I linked all of my files. Does this make sense? Can anyone please give me some advice? It would be much appreciated.

http://codepen.io/emilychadraba/pen/pvLjzm

<!doctype html>
<html>
<head> 
<meta charset="UTF-8">
<link href="codepen.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="codepen.js"></script>
<script type="text/javascript" src="TweenMax.min.js"></script>
</head>

<body>
<div class="banner crop">

<img id="photo" src="http://bestevents.us/wp-content/uploads/2014/09/1409861249_10536823_10152285336897304_4970023981985043307_o.png"/>

<img id="beer1" class="absolute-left" src="http://www.gooseisland.com/content/gooseisland/en/goose/allBeers/_jcr_content/urbanAles/addbeer/sImage" />

<img id="beer2" class="absolute-center" src="http://www.gooseisland.com/content/gooseisland/en/goose/allBeers/_jcr_content/urbanAles/addbeer_1/sImage" />

<img id="beer3" class="absolute-right" src="http://www.gooseisland.com/content/gooseisland/en/goose/allBeers/_jcr_content/urbanAles/addbeer_0/sImage" />

<img id="logo" class= "absolute" src="http://www.gooseisland.com/assets/images/header-logo.png" </img>

<h2 id="hed1"> Introducing This Year's <br> Beverage Lineup </br> </h2>
<h2 id="hed2"> 312 Urban Block Party </h2>
<h3 id="hed3"> hosted by Goose Island </h3>
<h2 id="cta"> Join the Party </h2>
<h6 id="pale"> 312 Urban Pale Ale </h6>
<h6 id="wheat"> 312 Urban Wheat Ale </h6>
<h6 id="green"> Green Line Pale Ale </h6>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js">   </script>
</banner> 
</body>
</html>
Solution

  • It seems like you have the script trying to execute before both the TweenMax library is loaded and DOM is ready. Try the below html making sure that the codepen.js is the last elements in the body tag to make sure it is run last.

    <!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <link href="codepen.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="TweenMax.min.js"></script>
  </head>

  <body>

    <script type="text/javascript" src="codepen.js"></script>
  </body>

</html>