Share Posted August 30, 2013 (edited) 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> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> </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 src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <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 August 30, 2013 by VJ90102 Link to comment Share on other sites More sharing options...
Share Posted August 30, 2013 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! 4 Link to comment Share on other sites More sharing options...
Share Posted August 30, 2013 (edited) 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 August 30, 2013 by jamiejefferson looks like jonathan beat me to it =) 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now