Cannot tween a null target

[barrymul]

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

$(document).ready(function(){ 
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
	tmax_home_tl.pause();
	tmax_home_t2.pause();
	tmax_home_chart.pause();

// 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"});
		
		tmax_home_tl.paused(!tmax_home_tl.paused());	
		tmax_home_t2.paused(!tmax_home_t2.paused());	
		tmax_home_chart.paused(!tmax_home_chart.paused());	
		
		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:

 

http://www.mulrooneydesign.com/apps/infov4/

 

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. 

 

B

[Carl]

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/

[OSUblake]

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.