MASK REVEAL ON SCROLL

[anisos]

Hello creators, 

all respect for the work you're doing yall

I want to get your help please about some kind of scroll animation

this is the referral website https://asmobius.co.jp/

I want to know how to make that circular element reveals the background behind

am using nextjs and I tried a lot with gpt4 already

thank you in advance

See the Pen OJdVPXR by anisossss (@anisossss) on CodePen

[Rodrigo]

Hi,

 

You already asked similar questions and the answer basically remains the same. That is not something simple to achieve. I provided an example of the simplest approach to get started with in your previous thread.

 

If you want to use SVG for the masking these demos could prove helpful:

See the Pen qBxboNe by GreenSock (@GreenSock) on CodePen

 

See the Pen ZEaMOyY by GreenSock (@GreenSock) on CodePen

 

See the Pen KKZOYeB by GreenSock (@GreenSock) on CodePen

 

See the Pen oNaxdje by GreenSock (@GreenSock) on CodePen

 

See the Pen LYeMaJj by GreenSock (@GreenSock) on CodePen

 

See the Pen LYmWbbM by GreenSock (@GreenSock) on CodePen

 

See the Pen mdKZJVV by GreenSock (@GreenSock) on CodePen

 

Also be sure to check the great resources @PointC has here:

https://www.motiontricks.com/svg-tutorials/

 

Hopefully this helps.

Happy Tweening!