clhomme Posted April 4, 2023 Share Posted April 4, 2023 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 Link to comment Share on other sites More sharing options...
PointC Posted April 4, 2023 Share Posted April 4, 2023 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. 3 Link to comment Share on other sites More sharing options...
clhomme Posted April 4, 2023 Author Share Posted April 4, 2023 It's what I did. I used CSS variables (--colorArrow), but it doesn't work. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted April 4, 2023 Solution Share Posted April 4, 2023 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", }, }); 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now