Jump to content
Search Community

Why can't code be in <head>?

VJ90102 test
Moderator Tag

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

If I load the timeline code in the <head> and put play() in the <body>. The code "runs" but doesn't "display" animation on screen.

 

By "display" I mean: no animation happens on the browser screen.

 

By "runs" I mean: if I put a breakpoint on the .play() line in the <body>,  I can step into the TweenMax code in the <head> and watch variable like "e", and "this._duration" assume the correct values as I step deeper into the code.

 

I'm used to splitting things this way on the jQuery animate code I've been writing and must do so for compatibility. So why can't timelines be defined in the <head>?  I'm assuming there must be a little "trick" I'm missing to make it work. Please see <body> only and split code below (and attached).

 

 

With all code in the <body> this works no problem:

 

<html>
<head>
</head>
<body>
<div id="title">This is growing title</div>
<script type="text/javascript">
 var timeline = new TimelineMax({paused:true});
 timeline.to("#title", 2, {color:"#F0F", fontSize:"48px"});
 timeline.play();
 console.log("yes it ran");
</script>  
</body>
</html>
 
With the timeline in the <head> and play() in the <body> this doesn't do anything on screen but the console.log()string shows in the console, you can step into the timeline code and there is no error break:
 
<html>
<head>
<script type="text/javascript">
var timeline = new TimelineMax({paused:true});
timeline.to("#title", 2, {color:"#0FF", fontSize:"48px"});
</script> 
</head>
<body>
<div id="title">This is growing title</div>
<script type="text/javascript">
 timeline.play();
 console.log("yes it ran");
</script>  
</body>
</html>
 
[sorry I attached both twice, only download the first two!]

simplest_timeline.html

simplest_timeline_head.html

simplest_timeline.html

simplest_timeline_head.html

Edited by VJ90102
Link to comment
Share on other sites

Welcome to the forums!

 

You can put your code in the HEAD tag..

 

But you are trying to play the timeline before the all assets have been loaded:

<html>
<head>
<script src="http://cdnjs.cloudfl...TweenMax.min.js"></script>
<script type="text/javascript">
window.load = function(){
       var timeline = new TimelineMax({paused:true});
       timeline.to("#title", 2, {color:"#0FF", fontSize:"48px"});
       timeline.play();
       console.log("yes it runs... when all images, links and assets have loaded");
};
console.log("runs immediately");
</script> 
</head>
<body>
<div id="title">This is growing title</div>
</body>
</html>

if you are using jQuery you can use the document ready method which waits until the DOM is ready:

$(document).ready(function(){
   // Your code here
 });

and for the window onload event:

// using native javascript
window.onload = function(){
   // your code here
};

// is the same as this using jQuery
$(window).on('load',function(){
    // your code here
});

i hope this helps!

  • Like 4
Link to comment
Share on other sites

This one is actually pretty simple: When you run

<script type="text/javascript">
  var timeline = new TimelineMax({paused:true});
  timeline.to("#title", 2, {color:"#0FF", fontSize:"48px"}); 
</script> 

in the <head>, it is trying to find document.getElementById('title') before the DOM is ready and #title exists. GSAP, like a lot of other libraries doesn't throw errors when you try to manipulate an 'empty collection' (this is actually a good thing, really...) and since #title wasn't found, no actual tweening is done.
 
If you are also loading jQuery on your page, you can use its super handy ready() function to delay a function call until the DOM is ready. At this point you can guarantee that if #title was in the HTML, then GSAP will be able to find it. The following, in the <head> of a page with jQuery, should definitely work

<script type="text/javascript">
  $(document).ready(function(){
    var timeline = new TimelineMax({paused:true});
    timeline.to("#title", 2, {color:"#0FF", fontSize:"48px"});
  });
</script>
Edited by jamiejefferson
looks like jonathan beat me to it =)
  • Like 3
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...