CSSRulePlugin deprecated

[Jo Mourad]

Hello! I was wondering what does this mean : 

 

I mean, here i have lets say this: 

 

.div {
  &::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius:50%;
    background: blue;
    position: absolute;
    right: -2em;
    top: 20%;
  }
}

and i want to animate this pseudo-element. How would a css variable achieve this? 

 

Sorry i'm a bit confused. Pretty sure i'm missing something!

 

Thanks !

 

[Dipscom]

Hey Jo!

 

Animating pseudo elements is tricky as they are generated content and not in the DOM. Do you have a very pressing reason why it must be a pseudo-element? Is it not possible to add a new div tag after in the DOM yourself?

[Jo Mourad]

Hey @Dipscom ! I think it's only because i'm used to do it like so? I use wordpress mainly (for customer reasons) and say i have 10 dates in 10 different rows (the html gets very messy with wordpress's visual composer...) and i want to add a bullet point after each of these dates, i found it simpler and quicker to just add it with a pseudo... Any suggestions of a better way? (the way visual composer is made is that you can't really play in the html itself unless you add html code blocks... and i'm using this so that any customer can change freely the content without any help)

 

Thanks!

 

 

 

[Dipscom]

Oh and to actually answer your question:

 

You would set a CSS variable on the attribute you want to animate and tween the CSS variable.

 

// In your CSS you'd set something like:
/*
 div:before {
  transform: translateX(var(--move-x));
 }
*/

// In your JS you'd then:
gsap.to("div", { "--move-x": "33px" });

 

[Dipscom]

Sorry, it seems we've posted over each other. Let me know if the above post helps you at all.

[Jo Mourad]

Ok! so this means that the css variable on the pseudo element can be called directly from the element itself without using ::before ? 

 

[Dipscom]

When using GSAP, yes. You target the scope of the variable you want to use, in this case the div and you tween the variable itself. No need to use the ::before.

[Jo Mourad]

Awesome thanks! 

[iDad5]

Just a quick word on CSS variables (aka custom-prpoerties) and pseudo elements. I have stumbled upon this in an other context and it might help someone save some time and trouble: CSS custom properties a inherited like most other properties according to the rules off CSS. ::before and ::after inherit a lot of things from their parents, but the rules can be complex, when the property gets moved for example from :root down. It can happen that a variable that is available in the element it self is not available in the pseudo element. (it get's even trickier with other pseudos)

If that happens and you cannot ensure the the inheritance is working through all the stages I found it useful to do the following:

:root, *::before, *::after {
  --my-variable: calc(60ch + 2em);
}

Just in case someone has those troubles.