Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ankit_hingarajiya

Scroll animation object and mask color change

Recommended Posts

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.

Link to post
Share on other sites

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 2
Link to post
Share on other sites

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:

 

Link to post
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.

×