Clip Path Transparent Problem
Instead of the 2nd sea picture in the circle, I want to see the transparent background and the red area in the background.
My purpose of use: when the page is first opened, the background will become transparent and visible as the circle rotates clockwise.
like the opening on this site for example: https://asmobius.co.jp/
Only background image is added as "clip path". I think it's impossible with this technique. maybe there is an alternative way?
my codepen link:
Hi,
That website is actually using canvas with WebGL (THREEJS) to create the circle wipe and most likely either shaders or a displacement filter for the image effect.
You can apply a clip path based on a SVG element that you can update using GSAP. I updated the codepen example you provided:
See the Pen eYjgqXJ by GreenSock (@GreenSock) on CodePen
Also for animating the circle you can use that approach or the one from this a
