MorphSVG test works in Codepen but not on my site

[Trev 3 Likes (Newbie)]

Hi one and all - I have a small test that has produced nothing on my site but I just loaded it to Codepen (from "Morphing Countdown" by Chris Gannon) and I get nearly what I was after

Is there something else I need to load apart from MorphSVG & TweenMax? Perhaps I should load these some other way?

Internet Explorer is showing "Cannot load a null target" TweenMax.min.js (16,27469).

I have it loaded on my site at: www.ezpc.eu/anitalouise.html

Thanks to anyone who has time to look at this - Trev 

See the Pen GpxgpB?editors=100 by thorntontf (@thorntontf) on CodePen

[ohem 333 Likes (Leader)]

Try loading Greensock at the bottom of the page, before the closing </body> tag, instead of in the head.

[Trev 3 Likes (Newbie)]

Thanks ohem - I have tried that but I'm still getting TweenMax is undefined in Chrome Dev Dools

[GreenSock 12,412 Likes (Superhero)]

Trev, could you show us the page that has the scripts loaded at the bottom and is still giving the error? It looks to me like ohem is right - you've got a script running that is referencing an element that is LOWER on the page, thus it hasn't been parsed by the browser yet and doesn't exist (hence the null target error). 

 

In other words, the browser reads from the top down, so if it hits your script that is saying "tween #a1" but that #a1 element is lower on the page, the browser chokes and is like "wait...I don't see any #a1 in memory yet, so I'll barf out an error". Moving your script to the bottom (or tuck it into an onload event) will ensure that the elements are parsed and available to the browser.

[Trev 3 Likes (Newbie)]

Apologies to ohem and thanks to you both - I threw ALL my JS including anitalouise.js down there and BANG - all good!

I even threw in a little window.onload to play my timeline as suggested 

Thanks to you both and thanks for the Banners broadcast the other night - very informative