Cannot tween a null target.

[valente97]

Hi, i'm using version 1.8.5 of GreenSock and i am getting 'Cannot tween a null target' I'm following ihatetomatoes tutorials on how to use GreenSock, i have also downloaded the documents he has provided which in his video works fine, but when i try it on Chrome it pulls up the same error?

 

This is my Javascript

		// Moving circles around project image - older IEs might struggle
		tlCircles = new TimelineMax({repeat: -1});
		tlCircles
			.to($projectImageBefore, 0.8, {cssRule:{top: '5px'}, ease: Linear.easeNone})
			.to($projectImageBefore, 0.8, {cssRule:{left: '5px'}, ease: Linear.easeNone})
			.to($projectImageBefore, 0.8, {cssRule:{top: '-5px'}, ease: Linear.easeNone})
			.to($projectImageBefore, 0.8, {cssRule:{left: '-5px'}, ease: Linear.easeNone})
			.to($projectImageAfter, 0.7, {cssRule:{bottom: '6px'}, ease: Linear.easeNone}, '0')
			.to($projectImageAfter, 0.7, {cssRule:{right: '6px'}, ease: Linear.easeNone}, '0.7')
			.to($projectImageAfter, 0.7, {cssRule:{bottom: '-6px'}, ease: Linear.easeNone}, '1.1')
			.to($projectImageAfter, 0.7, {cssRule:{right: '-56x'}, ease: Linear.easeNone}, '1.5');

And I dont get what is wrong with it but when i comment out from line 23 to 32 (which is what i have included above) it works so i think it might be an issue with the cssRule?

 

Any help with this would be much appreciated.

[Dipscom]

Whooooa! Thta's a ton of code...

 

Don't get me wrong but that much code, makes it hard for people to help you. This is why, the guys around here kindly ask people to provide a reduced case example in a live environment - like CodePen. That way - we can actually pin down what could be the issue.

 

Now, I can have a guess as to what is wrong. If you are getting the "cannot tween a null target" error, it means you are trying to animate something that does not exists or is invalid. So, if you can pinpoint that commenting out lines 23 to 32 makes it work then, that is where your invalid target is.

 

I've counted the lines and it seems to me that you are trying to tween a pseudo-element - Does it exists?

 

Try creating a simpler version of what you are trying to achieve with one element, for example. Once that is working, it is easier to scale up. Rather than start up with a complex setup and have to keep scaling down to hunt the bugs.

 

Happy Tweening!

[valente97]

Whooooa! Thta's a ton of code...

 

Don't get me wrong but that much code, makes it hard for people to help you. This is why, the guys around here kindly ask people to provide a reduced case example in a live environment - like CodePen. That way - we can actually pin down what could be the issue.

 

Now, I can have a guess as to what is wrong. If you are getting the "cannot tween a null target" error, it means you are trying to animate something that does not exists or is invalid. So, if you can pinpoint that commenting out lines 23 to 32 makes it work then, that is where your invalid target is.

 

I've counted the lines and it seems to me that you are trying to tween a pseudo-element - Does it exists?

 

Try creating a simpler version of what you are trying to achieve with one element, for example. Once that is working, it is easier to scale up. Rather than start up with a complex setup and have to keep scaling down to hunt the bugs.

 

Happy Tweening!

 

Sorry I just wanted to give you a full description so you wouldnt be needing to ask to see more of it, but i edited the post now

 

Yes i am trying to tween the before and after of an element which does exist and i have also included the JS at the end just to make sure everything gets loaded but it keeps giving me that error.

[Dipscom]

A demo is really what is needed here. Here's Carl explaining how you can make one:

 

 

 

See the Pen JKRBJN by dipscom (@dipscom) on CodePen

. I have no idea what animation you are after but it's a stab. 

 

You can see that is far easier to understand what is going on and what might be wrong/right in a live editable environment. 

 

Hopefully it will help. I am not too experienced on pseudo elements so, can't dive much deeper than this.

[Jonathan]

Hello, valente97

 

In this case like Dipscom advised a codepen demo should be provided otherwise we will not be able to properly help you! Since we wont be able to see your code in context. In your example you are working with the CSSRulePlugin, and only provide the JS code.. we will need to see the CSS and html as well.

 

So a live editable code example is what we need so we can better help you!

 

[valente97]

Sorry, only reason i didn't included it is because on codepen the issue doesn't happen so i thought it just wouldnt help but here is the link

 

See the Pen GqjBzz?editors=1010 by anon (@anon) on CodePen

[Jonathan]

Hello valente97, thanks for the codpen.

 

In your local files when you run this and you get that NULL error. Are the CSS external in a CSS style-sheet or is it in a embed <style> tag?

 

Also when i console out your var $projectImageBefore on LINE 25

 

See the Pen QEKVNN?editors=0100 by jonathan (@jonathan) on CodePen

console.log($projectImageBefore);

i do see the CSSRulePlugin getting what is in your CSS 

// output in console:
CSS2Properties { 
content: """", 
display: "block", 
width: "100%", 
height: "100%", 
position: "absolute", 
background-color: "rgba(242, 236, 189, 0.8)", 
top: "-5px", 
left: "-5px", 
z-index: "2", 
opacity: "1" 
}

And your CSS rule in your stylesheet

.project-image:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(242, 236, 189, 0.8);
  top: -5px;
  left: -5px;
  z-index: 2;
  opacity: 1;
}

So it looks like something from your local setup that is a miss

 

Also keep in mind that in codepen.. you dont need to add the html, head , and body tag in there since the HTML is basically the content of the body tag

 

[valente97]

Hello valente97, thanks for the codpen.

 

In your local files when you run this and you get that NULL error. Are the CSS external in a CSS style-sheet or is it in a embed <style> tag?

 

Also when i console out your var $projectImageBefore on LINE 25

 

See the Pen QEKVNN?editors=0100 by jonathan (@jonathan) on CodePen

console.log($projectImageBefore);

i do see the CSSRulePlugin getting what is in your CSS 

// output in console:
CSS2Properties { 
content: """", 
display: "block", 
width: "100%", 
height: "100%", 
position: "absolute", 
background-color: "rgba(242, 236, 189, 0.8)", 
top: "-5px", 
left: "-5px", 
z-index: "2", 
opacity: "1" 
}

And your CSS rule in your stylesheet

.project-image:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(242, 236, 189, 0.8);
  top: -5px;
  left: -5px;
  z-index: 2;
  opacity: 1;
}

So it looks like something from your local setup that is a miss

 

Also keep in mind that in codepen.. you dont need to add the html, head , and body tag in there since the HTML is basically the content of the body tag

 

 

Ah sorry, i just wanted to quickly reply and yes its in a stylesheet

[Dipscom]

Sorry, only reason i didn't included it is because on codepen the issue doesn't happen so i thought it just wouldnt help but here is the link

 

See the Pen GqjBzz?editors=1010 by anon (@anon) on CodePen

 

A bit late to state the obvious, given that Jonathan has already done more digging into the issue as myself.

 

If it works in CodePen but does not in your local setup then, something is amiss in your setup. The only way for this issue to be resolved is for you to compare the setup you have locally versus what is in CodePen noting what is different. That will pinpoint to you what is not working.