Text Color Change (blend-mode effect)

[coldgroove]

 

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.

[mvaneijgen]

Hi @coldgroove I've moved your question to its own topic and add a reference to the original post from 2018.

 

Can you provide a minimal demo with your code in it, this is so much more helpful than two codeblocks that can't be modified. If you're using React check out our starter templates on StackBlitz: React/Next

[PointC]

Yeah, I'd need to see a demo to offer any help. Just FYI - SVG clip-paths or masks work well for the invert effect, but you can also use CSS variables without a duplicate element like this demo. Just another option.  

 

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