Jump to content
Search Community

Uncaught exception: Cannot tween a null target.

boladeberlin 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

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);
	c.fill();
}

Here my Main();

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

 

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

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