Jump to content
Search Community

CSSRulePlugin deprecated

Jo Mourad test
Moderator Tag

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 @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

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.
×
×
  • Create New...