Scroll animation object and mask color change

[ankit_hingarajiya]

I saw this effect a lot of times (But its hard to inspect this effect) - (first section We are building more ...)
https://www.kanarys.com/about

i dont't no how to create like this type of animation any one help me Please.

Thank you in advanced.

[PointC]

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.

[ZachSaucier]

Apparently I wrote this answer but never hit "submit"...

Hey Ankit and welcome to the GreenSock forums.

 

That sort of effect is done with clipPaths/masking with layers. Here are some similar threads:

 

[ankit_hingarajiya]

Hello All

I have try to create animation 

 

Please suggest me if any change

See the Pen yLemGoJ by ankithingarajiya (@ankithingarajiya) on CodePen.

Thank you

[PointC]

The only change I'd recommend is using ScrollTrigger instead of ScrollMagic.

 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger