Jump to content
Search Community

Clip Path Transparent Problem

sawacrow test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

  • Solution

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!

  • Like 1
  • Thanks 1
Link to comment
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.
×
×
  • Create New...