sawacrow Posted January 9, 2023 Share Posted January 9, 2023 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: another example: See the Pen ExpZrVm by sawacrow (@sawacrow) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted January 9, 2023 Solution Share Posted January 9, 2023 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 article by @PointC: https://www.motiontricks.com/movie-countdown-animation/ Hopefully this is enough to get you started. Happy Tweening! 1 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now