Jump to content


Uncaught exception: Cannot tween a null target.

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

Good night guys!


I am trying to make an animation where the title of my draw are constantly changing color.

I am using this function to get the color randomly

function tweenToRandomColor(ctx) {
		TweenLite.to(ctx, 1, {colorProps:{fillStyle:"rgb(" + random(0,255) + "," + random(0,255) + "," + random(0,255) + ")"}, onUpdate:title, onComplete:tweenToRandomColor});

And here is the function that generates the random values

function random(min, max) {
  return (min + Math.random() * (max - min) + 0.5) | 0;

Here is the functions that ai changing color

function title(){
	var c = document.getElementById("acanvas").getContext("2d");
	c.font="600 35px verdana";
	c.fillText("SNAKES ON A PLANE",125,130);

Here my Main();

function main() {
    var c2d = document.getElementById("acanvas").getContext("2d");


I put all the code in this codepen link https://codepen.io/boladeberlin/pen/eKKNOy


if someone can help me telling how to fix this "Uncaught exception: Cannot tween a null target." i will be very thankful


Have a good day :D

See the Pen eKKNOy by boladeberlin (@boladeberlin) on CodePen

Link to comment
Share on other sites

well, you passing plain function to onComplete, that's why you get repeated errors.

You can tweenToRandomColor.bind with the target parameter or make target variable accessible from upper scope.

Also, im not sure if it will tween result from .getContext()...

Link to comment
Share on other sites

Right. In case it wasn't clear, @determin1st was basically saying that your tween inside of tweenToRandomColor() has an onComplete that points to that same function, but when that's called there's no parameter passed as "ctx". That's null at that point which is why the tween throws that error. 


You could just add onCompleteParams:[ctx] and it should work fine. 

  • Like 1
Link to comment
Share on other sites

It worked guys thankyou so much and ye it was so obvious but i was stressing so much tha i didnt think corretly.

I'm very thankful guys :D

  • Like 1
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.