Change background color of pseudo element

[clhomme]

Hello everyone! I was wondering if you could help me.

 

I've shuffled around in my code so it would work in codepen, but the gist is, I want to use scrollTrigger to have the color pass (travel?) through the title and land on the arrow (so the arrow would stay pink once the animation is complete). My problem is, I can't get that damn arrow to change color.

 

I think the problem is 1) the arrow uses a pseudo-element (:before) to show and 2) the "filling" (background? content?) of the arrow is not transparent like the letters, but white. I couldn't make the background of the arrow transparent or else it doesn't show at all.

I've tried to cheat by having the arrow background change color once the letters' animation is done. I've used a variable for it, as shown in this tutorial but it doesn't work. I've tried everything with my gsap code (with a timeline, without, use scrollTrigger, don't use scrollTrigger), but nothing works. Does anyone have any idea of what I could do?

 

Thank you very much!

 

(P.S: Sorry if it doesn't work, it works decently in codepen, I don't know why it won't here...)

See the Pen BaOXPRQ by Dhandelyon (@Dhandelyon) on CodePen

[PointC]

I'd recommend CSS variables to handle animating pseudo elements. Here's a basic example.

See the Pen rNpXXWq by PointC (@PointC) on CodePen

 

Happy tweening.

 

[clhomme]

It's what I did. I used CSS variables (--colorArrow), but it doesn't work.

[GreenSock]

You nested your "--colorArrow": "pink" INSIDE the ScrollTrigger object which is incorrect. 

// bad
.to("html", {
  scrollTrigger: {
    trigger: ".arrow-right",
    "--colorArrow": "pink",
  },
});

// good
.to("html", {
  "--colorArrow": "pink",
  scrollTrigger: {
    trigger: ".arrow-right",
  },
});