Jump to content
GreenSock

Acccent

CSSRulePlugin: "Cannot tween a null target"?

Go to solution Solved by Jonathan,

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 everyone :)

 

I was looking to use the CSSRulePlugin to perform some em-based transforms that would still work as expected even after a site-wide change in the font-size (for responsiveness).

 

Unfortunately, I think I must be doing something wrong...? When I store the CSS rule into a variable, it's stored as 'undefined', and then of course I get a "Cannot tween a null target" error.

 

Have a look at the codepen, it's pretty simple... I think I just missed something obvious somewhere haha ^_^'

See the Pen zrMzee by Acccent (@Acccent) on CodePen

Link to comment
Share on other sites

I'm sorry, but I don't see any ems or any errors. Perhaps you forgot to turn off auto save when creating the pen?

 

In any case I can't see the error you're facing right now.

Link to comment
Share on other sites

well, no, the error is there... here's the JS code:

var tl = new TimelineLite(),
    css = CSSRulePlugin.getRule(".box");

tl.to(".red", 1, {x:500})
  .to(css, 1, {cssRule:{backgroundColor:"#006699"}});

if it worked, both divs with the '.box' class should have their background color changed to #006699, and it doesn't happen. And the inspector says there's an error... at least on my end.

Link to comment
Share on other sites

Hi Acccent  :)

 

it's about css rules priority , so try to change your css order to this :

.red {  background-color:red; }

.blue {  background-color:blue; }

.box {
  width:50px;
  height:50px;
  position:relative;
  margin-bottom:2px;
}

and don't forget tween will go from empty value , so you will see a tween from transparent .

i think in this case that's better to use CSSplugin instead of CSSRulePlugin  .

 
  • Like 6
Link to comment
Share on other sites

Hi @Diaco ^_^

 

Thanks for the fix, but... I don't really get it? How am I supposed to order my CSS rules in a production context with thousands of lines? (I don't mean to say it's impossible, I just don't understand how I would need to do it.)

 

As for using CSSPlugin instead of CSSRulePlugin, I updated the pen to better represent the responsive design I have in mind – as you can see, the final shape isn't supposed to be the same size if the window is <1000px wide, and if I use the CSSPlugin GreenSock caches the values on first load and then uses those regardless of the window size (while, if only the CSS rule is changed, I can make it work with CSS media queries.)

 

edit: oooh I see what you mean – since the .box styles were before .red and .blue, and both of those contained background-color properties, the styles added by GreenSock were being overridden. I'll have a look at my website to see if that's what's happening, but unfortunately I don't think it is... so there must be something else going on...

 

edit: it was! well, not exactly – the issue was that one of the CSS rules I was targeting wasn't actually explicitly present in my stylesheet, which I hadn't noticed before investigating the order of declarations... 

 

AzBD0xb.gif

 

 

Thanks!!

Link to comment
Share on other sites

Just to clarify Acccent, in CSS whatever the last CSS rule that directly targets the same element will be used. The browsers CSS parser will use the last rule targeting that element with the same value. The only time priority does not apply is if the CSS rule has greater Specificity.

 

CSS Specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

CSS Resources: https://developer.mozilla.org/en-US/docs/Web/CSS

 

Inline styles on elements or tags will take priority over styles in your style sheet. Although you can use the !important declaration to override inline styles, but it should only be used as a last resort.

 

:)

  • Like 4
Link to comment
Share on other sites

Hey again,

 

well, I thought this was solved, and indeed it was... in Firefox and Chrome. Good ol' IE11 isn't having any of it.

 

The codepen does work in IE, though, so I'm wondering what's wrong here.

 

The CSS rule I'm targetting is this:

#menu-main-menu > .menu-item:nth-last-child(2)

Do you see any reason why that wouldn't work? The styles are properly applied to the elements... maybe the CSS is loaded after the JS...?

Link to comment
Share on other sites

We need a codepen for some context.. ^_^

 

IE is very strict in it browser CSS parser, so if you have other CSS properties in your style-sheet it could throw off this or other CSS selectors and rules. Sometimes it could ignore your rule or selector if it parses with some unknown property or value.

 

But i made this quick codepen and :nth-last-child works:

 

See the Pen yeQWje by jonathan (@jonathan) on CodePen

 

I tested in Firefox , Chrome, and IE11 on Windows 7

 

I'm sure others can confirm this as well?

 

:)

Link to comment
Share on other sites

Sorry for not posting the codepen, I was trying to narrow down the potential sources...

 

Here's an update version that works in Chrome and FF, but not IE: 

See the Pen zrMzee by Acccent (@Acccent) on CodePen

(same link as in the first post)

 

Also, it's worth mentioning that if you use ::after as you're meant to (I think), it doesn't work in Chrome either. You have to use :after both in the css and with GreenSock.

 

edit: it seems the :last-child is the culprit...? In the pen, I added tests for .box:last-child, .box > a:after, .box:last-child > a and .box:last-child > a:after and the first of those fails in IE. But then again your codepen works, @Jonathan? I'm confused :s

Link to comment
Share on other sites

Good point, this is not a bug! Just as a rule of thumb when targeting pseudo-elements with GSAP's CSSPlugin or the CSSRulePlugin.. always use the single colon syntax ( : ), not the new pseudo-element double colon syntax ( :: ).

 

You were doing right by just using the single colon syntax ( : ) ;) major modern browsers support both syntax

 

Also keep in mind you can only use only one pseudo-element in a CSS selector, regardless of the colon syntax.

Link to comment
Share on other sites

Well, the thing about the double colon is just a side remark, my actual code doesn't use them. I just found out about that while writing the codepan, haha.

 

I stealth-edited my previous post while you were writing yours I think, sorry! Please have a look at this: 

See the Pen zrMzee by Acccent (@Acccent) on CodePen

It works in Chrome and FF, but not in IE11... :(

Link to comment
Share on other sites

I was wondering if anyone could help me with this? Since I have a codepen that works perfectly in Chrome and FF but not IE, I assume it's a bug somewhere, maybe with IE itself... but I'm not sure how to fix it :(

Link to comment
Share on other sites

  • Solution

Hi Acccent,

 

You will have to change some of your CSS selectors in your CSS rules, due to IE being a poopy pants!

 

This is not a bug in the CSSRulePlugin. Sometimes some pseudo-classes like :last-child or :nth-last-child have issues cross browser when mixed with classes, especially in IE. Sometimes you have to use them on only tags, especially in IE, where their CSS parser is really strict and will not work depending on the combination of your CSS rule. Test the following in IE11

 

See the Pen KVbGRP by jonathan (@jonathan) on CodePen

 

So you can change this rule:

.box:last-child {

}

To this using a simple selector like this:

div > div:last-child {

}

Even better would be to give your first div parent an ID so the CSS selector is parsed faster,  something like this:

#box > div:last-child {

}

So as a rule of thumb you have to be very careful when choosing your selectors, especially with pseudo classes, since not all browsers will support the same combination of CSS selector rules, and/or combination of mixed selectors.

 

:last-child is part of the CSS3 spec, unlike :first-child that is part of CSS 2.1. But :last-child gets parsed correctly only after page load successfully, if the page is busy than :last-child could be rendered differently or not at all depending on the browser. So IMHO, i stay away from using :last-child due to its behavior cross browser.

 

:)

  • Like 4
Link to comment
Share on other sites

Yup, that did it! I had to change .menu-item to just li. (I was already selecting an ID as the parent.)

 

Thanks a lot @Jonathan! I definitely wouldn't have found this by myself. ^_^

  • Like 2
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.
×