Search the Community

Hey there uhm, I'm trying to make a similar effect but got stuck so maybe you guys can help me? I've basically copied @PointC 's svg pattern with the mask one not the clipPath, and I only want to have a vertical mask with 2 fixed colors changing into each other. So I only changed the svg size to be width=100% height=100% just to make it a fullscreen one. There is no probs there. However why do you select the rect's that are inside of definition tags for x and y animations? I got confused about that because if I select those my mask doesn't change neither with scaleY: 0, or height:0. Nonetheless if I attach my ref to the rect that you defined as "this is the fixed color background with white as the fill, but the stroke changes", it works. I mean it's kinda. The blueScreen is going upwards with scaleY: 0. But the mask doesnt work so the other text isn't showing up for some reason. I've removed the stroke stuff too if its related. This is my svg el with a few changes: <svg id="maskDemo" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 400 200" > <title>Invert SVG text fill color with masks</title> <defs> <mask id="theMask"> <rect id="maskerH" width="400" height="200" x="-400" y="0" fill="#fff" /> <rect id="maskerV" width="400" height="200" x="0" y="200" fill="#fff" /> </mask> </defs> {/* <!-- this is the fixed color background with white as the fill, but the stroke changes --> */} <rect id="bgFixed" ref={blueScreenRef} width="400" height="200" fill={data.textColorCode} // stroke="#94c356" // stroke-width="4" /> {/* <!-- this text color changes based on the chosen color swatch--> */} <g id="startColor" fill={data.bgColorCode} fontSize="100"> <text className="theCount" textAnchor="end" x="220" y="140"> 100 </text> <text textAnchor="start" x="230" y="140"> % </text> </g> <g mask="url(#theMask)"> {/* <!-- this is the changeable color background based on the swatch click--> */} <rect id="bgChange" width="400" height="200" fill="#94c356" /> {/* <!-- this is the duplicate text group revealed by the masks it's always white --> */} <g id="end" fill="white" fontSize="100"> <text className="theCount" textAnchor="end" x="220" y="140"> 100 </text> <text textAnchor="start" x="230" y="140"> % </text> </g> </g> </svg> and this is my useEffect: useEffect(() => { const ctx = gsap.context(() => { const sharedScrollTrigger = { start: "top top", trigger: sectionRef.current, invalidateOnRefresh: false, scrub: 1, end: () => "+=4500", // markers: true, }; // pinning the section gsap.to(sectionRef.current, { scrollTrigger: { start: "top top", pin: true, trigger: sectionRef.current, invalidateOnRefresh: false, scrub: 1, end: () => "+=5000", // markers: true, }, }); // close the blueScreen gsap.fromTo( blueScreenRef.current, { scaleY: 1, }, { scaleY: 0, scrollTrigger: sharedScrollTrigger, } ); // other anims... }, sectionRef); return () => ctx.revert(); }, []); What am i doing wrong in here brothas? I think i suck with the svg's @PointC ? any help would be greatly appreciated.

Hi, Is it possible with Greensock to achieve an effect were as a div slides over some text, the text changes color, but only the text covered by the div changes color. Visual Example: In the Codepen supplied I have a red bar that slides over some text and I would like the text to change to white whenever the red bar slides over it, however, whenever any of the text isn't covered by the red bar, I would like that text to remain black. I was thinking a blend-mode might do this, but alas it seems not, because there isn't a blend mode that would turn the text from black to white (as far as I can tell). I'm kind of thinking this isn't possible? But I thought I would ask here in case. Kind regards, Paul