Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Jo Mourad

CSSRulePlugin deprecated

Go to solution Solved by Dipscom,

Recommended Posts

Hello! I was wondering what does this mean 695327612_ScreenShot2022-07-22at8_58_20AM.png.95cb588a93793331952c01fd2e11659f.png

 

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 !

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

 

 

 

Link to comment
Share on other sites

  • Solution

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" });

 

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Awesome thanks! 

Link to comment
Share on other sites

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.

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