Search the Community
Showing results for tags 'head'.
Found 1 result
-
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
