Jump to content
Search Community

Cannot tween a null target

barrymul test
Moderator Tag

Go to solution Solved by Carl,

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

Hi all,


Fairly new to the whole javascript tweening animation business. 


I've included a fairly complex svg file in a website I'm working on via an <object> tag and am using GSAP to animate it. 

//GSAP tweening/animation STUFF

var svg = document.getElementById("homeAnimation"); 
var svgDoc = svg.contentDocument;

var 	homeSwitch = svgDoc.getElementById("homeSwitch"),
			homeSmallGear = svgDoc.getElementById('homeSmallGear'),
			homeBigCog = svgDoc.getElementById('homeBigCog'),
			homePipeBall1 = svgDoc.getElementById('homePipeBall1'),
			homePipeBall2 = svgDoc.getElementById('homePipeBall2'),
			homePipeBall3 = svgDoc.getElementById('homePipeBall3'),
			homePipeBall4 = svgDoc.getElementById('homePipeBall4'),
			homeBeltGearLeft = svgDoc.getElementById('homeBeltGearLeft'),
			homeBeltGearRight = svgDoc.getElementById('homeBeltGearRight'),
			homeChart = svgDoc.getElementById('homeChart'),
			phoneChart = svgDoc.getElementById('phoneChart'),
			phonePie = svgDoc.getElementById('phonePie');
	var tmax_home_switch = new TimelineMax(); //Switch has separate timeline so it can pause the animation but still move.
	var tmax_home_chart = new TimelineMax({repeat:-1}); //Chart has separate timeline so it can repeat.

	var tmax_options = { }; //options config goes here
	var tmax_home_tl = new TimelineMax(tmax_options); //timeline takes options input and is declared

	var tmax_repeat_options = { }; //options config goes here
	var tmax_home_t2 = new TimelineMax( tmax_repeat_options); //timeline takes options input and is declared

	//Clear the stage 
	tmax_home_tl.set([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], {opacity:0});
	tmax_home_tl.set(homeChart, {x:-20});
	tmax_home_tl.set(phoneChart, {scale:0, transformOrigin: "center center"});
	tmax_home_tl.set(phonePie, {scale:0, transformOrigin: "center center"});
 //starts off paused

// mouseover cursor change.	
homeSwitch.addEventListener("mouseover", funcover, false);

function funcover() {  
   homeSwitch.style.cursor = "pointer";

homeSwitch.addEventListener("click", function() {
		tmax_home_switch.to(homeSwitch, 0.2, { rotation: 60, repeat:0, delay:0.2, transformOrigin: "center center"})		
										.to(homeSwitch, 0.1, { rotation: 0, repeat:0, delay:0, transformOrigin: "center center"});
		if(tmax_home_tl.set([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], {opacity:1})) {
			TweenMax.set([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], {opacity:0});

	tmax_home_chart.to(homeChart, 0.25, { x:50, transformOrigin: "center center"}, 8)
							.to(homeChart, 0.5, { y:26, transformOrigin: "center center"})
							.to(homeChart, 20, { x:500, transformOrigin: "center center"});
	tmax_home_tl.staggerTo([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], 0.5, { opacity:1 }, 3.4)				
							.staggerTo([phoneChart, phonePie], 0.5, { scale:1, transformOrigin: "center center"}, 0.5);							
	tmax_home_t2.to(homeSmallGear, 4, { rotation: 360, repeat:-1, ease: Power0.easeNone, transformOrigin: "center center"}, "cogs")
							.to(homeBigCog, 8, { rotation: 360, repeat:-1, ease: Power0.easeNone, transformOrigin: "center center"}, "cogs")								
							.to([homeBeltGearLeft, homeBeltGearRight], 8, { rotation: 360, repeat:-1, ease: Power0.easeNone, transformOrigin: "center center"}, "cogs+=4");						

There is the code all the elements being selected are definitely in the SVG file that is being imported. It seems to randomly work and other times not. Any suggestions?


I'm getting a "Uncaught Cannot tween a null target." in Chrome but it works fine in Firefox and sometimes IE. 


Here is the bones of the site:




I'm guessing that the GSAP code is firing before the SVG DOM is instantiated any way to avoid this happening? 


Also any critique of my code generally is more than welcome. 



Link to comment
Share on other sites

  • Solution

Yeah, it seems like the SVG simply isn't there when your JS is running. To confirm this, use a TweenLite.delayedCall() or setTimeout to wait 5 seconds before your timelines and tweens are created. Or you can inline your <SVG> just to make sure your JavaScript is correct.


Once you confirm that the issue relates to the JS executing before the SVG is loaded you can then look for techniques that help you detect when the SVG is ready. This tool looks pretty cool: https://useiconic.com/tools/iconic-js/

Link to comment
Share on other sites

The $(document).ready() is for the HTML on your page. You need to listen for a load event on your SVG and have that create your GSAP animations. But since you're using jQuery, it might be easier to just use its load method and use the complete callback to start the animation.

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