Jump to content
Search Community

Null Target Error

jlo 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

Hey GS guys,

 

Been using the GS platform for a bit now, loving it, but lately I keep running into the "cannot Tween a null target" error, and for the life of me I can't find what's causing it. I've been trying to do a simple rotation on an image but it's stuck on this error.

 

I created a new page to show what I mean, stripped back everything in the project to its basics so I could nut out the problem, here's a link: http://webslinger.com.au/greensock_test/index.html

 

Apologies in advance if this has been answered already, I had a search through other posts and articles and I know this topic has been covered a little (mostly in AS forums though) but I haven't been able to find a solution as yet. Knowing my luck it'll be something really small and obvious too.

 

Cheers,

jlo

Link to comment
Share on other sites

This is happening because you are trying to select #logo before it exists on the page. Since document.getElementById("logo") doesn't find anything, var logo becomes null. TweenLite then throws an error since you are trying to tween a null logo.

 

You could either move

<script type="text/javascript">
  var logo = document.getElementById("logo");
  TweenLite.to(logo, 1, {rotation:"160_cw"});
</script>

so it comes at the end of the <body> tag, instead of the <head> tag, or using a library like jQuery (not necessary, but it makes it easier to be cross-browser compatible), you can bind to the document ready event e.g.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // at this point #logo exists and can be selected by getElementById
  var logo = document.getElementById("logo");
  TweenLite.to(logo, 1, {rotation:"160_cw"});
});
</script>
  • Like 2
Link to comment
Share on other sites

Hahaa, no worries.

 

Course', it might have helped if I read through the documentation in the first place and remembered to declare/run everything in the right order to begin with  :P

 

So, I just moved the script to the end of the body (since the original project files have a bunch of js sitting there anyway, jQuery etc), and the console's not reporting any error's, but now it's just..... doing nothing.

It's not rotating, or executing (so it seems anyway). I'm completely stumped. What am I missing here? Am I still misplacing sections of the code?

It's a real kicker, since I've actually already used GS a few times now to animate divs inside pages without any hassles, but this one's got me scratching my head.

 

I updated the page in the same link I posted above, you can see the results there for reference.

Link to comment
Share on other sites

Ah another quick one  ;)

 

You're only including TweenLite.js in this page, but TweenLite alone is not enough to manipulate CSS properties like rotation - you need to include CSSPlugin as well (or even just TweenMax.js, which includes CSSPlugin and TimelineMax and more in the one file).

 

As to why it appears to do nothing without errors - without CSSPlugin, GSAP is trying to tween the property 'rotation' on logo i.e. logo.rotation. It is, in essence, actually working, but its not tweening something that has a visible effect. 'rotation' is not a default property of DOM elements, and is not related to how CSS rotation is applied.

 

When CSSPlugin is loaded though, GSAP will detect that 'rotation' is a CSS property it can tween, and then applies it through the style tag of the element.

  • Like 2
Link to comment
Share on other sites

Ah - that makes more sense now, and thanks for explaining it  :)

 

So, dumb question, but are there only particular CSS properties that require the CSSPlugin to work, because I've been tweening objects using only TweenLite? From memory, they were only x/y movements, so 'left' or 'right, nothing like width or height - so would that mean that 'spatial' values are fine with just TweenLite, but 'visual' or stylistic values need extra help?

[nb. I did read through the documentation this time   :P , I just assumed that the CSSPlugin file 'kicked in', or TweenLite pulled it in, so long as it was present, but didn't necessarily need to be referenced. Apparently I was mistaken.]

 

Just FYI, I'd been using this demo from a post a few months ago as reference, was assuming the same thing re CSSPlugin/other files, didn't even occur to me to swap out for TweenMax (well, it did, but was trying to be a tight-arse and save on file size space).

 

Thanks again for the help!

Link to comment
Share on other sites

for file size to stay low you can just include TweenLite and CSSplugin js only to keep file size down. If your not using any other special plugins for GSAP, then you can just limit the files your only going to use.

 

If you click the get GSAP button above and select customize. And then choose TweenLite and CSS and it will output this for you to copy and paste

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/plugins/CSSPlugin.min.js"></script>

so with the CSSPlugin.min.js included as Jamie talked about above you can animate those CSS properties like rotation.. and as stated in the DOCs if you you declare the css:{} in your tween you can get a slight speed boost, but is optional

 

http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

Normally, css-specific properties would need to be wrapped in their own object and passed in like TweenLite.to(element, 1, {css:{left:"100px", top:"50px"}}); so that the engine knows that those properties belong to the CSSPlugin, but because animating DOM elements in the browser is so common, TweenLite and TweenMax (as of version 1.8.0) automatically check to see if the target is a DOM element and if it is (and you haven't already defined a "css" object in the vars parameter), the engine creates that css object for you and shifts any properties that aren't reserved (like onComplete, ease, delay, etc. or plugin keywords like scrollTo, raphael, easel, etc.) into that css object when the tween renders for the first time. In the code examples below, we'll use the more concise style that omits the css:{} object but be aware that either style is acceptable.

 

:)

Link to comment
Share on other sites

Hmm I'm not sure how you managed to tween elements with properties like left/x using only TweenLite... maybe magic? :P

 

TweenLite, without CSSPlugin, contains all you need to just tween numerical properties of javascript objects (object.somenumericalproperty). Objects include stuff like arrays, object literals, and DOM elements e.g.

var myobject = {
  value: 100,
  othervalue: 1
}
TweenLite.to(myobject, 1, { value: 200 });
// myobject is tweened to { value: 200, othervalue: 1 }
With CSSPlugin though, TweenLite can also target the CSS properties of a DOM element, which it applies through the elements 'style' attribute (element.style.somestyle). e.g.

<div id='element' style='top: 0px;'>Hello</div>
...
var myelement = document.getElementById('element');
TweenLite.to(myelement, 1' { left: 200 });
// myelement is tweened to <div id='element' style='top: 0px; left: 200px;'>Hello</div>
DOM elements have other direct properties that can be tweened (e.g. <img> has a separate, non-CSS height property) and you can also add new properties called whatever you like, but these are almost universally unrelated to any sort of visual changes.
  • Like 2
Link to comment
Share on other sites

Thanks for the feedback Jonathan, that clears it up a bit. I figured at the end of the day it was just better off using TweenMax - by the time you combine TweenLite, CSSPlugin and whatever else is needed for easing etc you've pretty much reached the same file size as TweenMax anyway, so all good.

 

Jamie, I'm not sure how I did it either, definitely the results of some whacky experimentation, though magic would seem the most logical answer. From memory, it did work, but the result was somewhat degraded - text that I would have fly in from the right for example would leave a trail, and the animation wasn't very smooth (as opposed to running it properly in later versions with TweenMax). If you're genuinely curious I can recreate it for you  ;) .

 

Just for reference, the end result of all my questioning above can be seen here (the intro spinning cup animation): http://www.theornateoracle.com

(might have to do a little work on image size reduction/preloading or delay to get it load a little smoother, but happy with the result, so cheers  :mrgreen: )

 

Thanks again guys.

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...