Jump to content
Search Community

Scroll animation object and mask color change

ankit_hingarajiya test
Moderator Tag

Recommended Posts

Hi @ankit_hingarajiya :)

 

Welcome to the forum.

 

I think Zach is working on an awesome answer for you, but I'll jump in with my two cents. That website seems to be using canvas, but you can pull off the same effect with a SVG. The trick is making a duplicate shape and text layer. The duplicate shape is placed into a clip-path and that clip-path is applied to the duplicate text. Something like this:

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

 

You'd then just hook the movement of the revealing element to the scroll with ScrollTrigger.

 

You can make it work with a mask too. I have a couple masking/clipping articles which may help.

https://www.motiontricks.com/invert-svg-text-with-a-mask/

https://www.motiontricks.com/svg-masks-and-clippaths/

 

Here's one of the examples from the articles.

See the Pen 3eec7a76275575b63995ff7e364473e7 by PointC (@PointC) on CodePen

 

Hopefully that helps a bit. Happy tweening and welcome aboard. :)

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...