Animate pseudo-elements like `::before`

[vanss472]

Is there a way to control the `::before` `background-color` to gradually turn black while scrolling? Right now is just turning black immediately the pinned class is active.

See the Pen oNJXbvp by Vanss472-the-decoder (@Vanss472-the-decoder) on CodePen

[Rodrigo]

Hi,

 

The reason for that is the way you have your color string. This seems to work the way you expect:

.pinned-active {
  --pinned-active-black: rgba(14, 14, 14, 0);
}

Then in your JS:

sectionTl.current.to(section, {
  "--pinned-active-black": "rgba(14, 14, 14, 0.6)",
  y: () => -100,
  duration: 1,
  scrollTrigger: {
    ...
  }
});

Hopefully this helps.

Happy Tweening!

[Rodrigo]

Hi,

 

Another option is to animate just the opacity, I just realize that the start and end colors are the same, so no need to run all that. This seems to work in the same way:

.pinned-active {
  --pinned-active-black: rgb(14, 14, 14);
  --active-opacity: 0;

  &::before {
    position: absolute;
    z-index: 100;
    display: flex;
    width: 100%;
    height: 100%;
    background-color: var(--pinned-active-black);
    opacity: var(--active-opacity);
    content: "";
    inset: 0;
  }
}

Then in the JS:

sectionTl.current.to(section, {
  "--active-opacity": 0.6,
  y: () => -100,
  duration: 1,
  scrollTrigger: {
    ...
  }
});

Hopefully this helps.

Happy Tweening!

[vanss472]

@Rodrigo aaaah you're right thanks eagle eyes!!!