JPM82 Posted February 26, 2022 Share Posted February 26, 2022 If you look at the example in the codepen, what I want to happen is the white text will turn black as the background moves to the right. I want this to be a seamless transition. I've seen this in other examples using svgs and masks, but I'm at a total loss as to how to achieve this. I'd prefer to not use SVG's if possible, only because this is going to be the hero section of a page, and I'd like the content to be changed at anytime but still keep the effect in tact. Is this possible? Any help or assistance would be wonderful. Thank you! See the Pen qBVMmyE by Gemini7401 (@Gemini7401) on CodePen Link to comment Share on other sites More sharing options...
Anurella Posted February 26, 2022 Share Posted February 26, 2022 You can try using the css property mix blend mode for the text but you cannot apply transitions on it, but the hero section would need a background color of white, removing the z-index on the hero:before element would help. see below See the Pen ZEaMVxy by Anurella (@Anurella) on CodePen I think SVG masks would be great, you can use text in SVG. check out @PointC tutorial https://www.motiontricks.com/invert-svg-text-with-a-mask/ 5 Link to comment Share on other sites More sharing options...
JPM82 Posted February 26, 2022 Author Share Posted February 26, 2022 @AnurellaThis would work perfectly, but it doesn't seem like the mix-blend-mode properties can be adjusted to a certain color. The 'black' in the real project is a dark grey. Link to comment Share on other sites More sharing options...
PointC Posted February 26, 2022 Share Posted February 26, 2022 I'd use SVG text and a mask, but you can accomplish the same thing by cloning the element and using a couple of clip-paths. Text color and background-color won't matter by using this approach. See the Pen VwrGqrV by PointC (@PointC) on CodePen Hopefully this helps a bit. Happy tweening. 6 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