Clip path image reveal

[dadostudio]

Hi, I'm trying to build an image reveal transition on a website. Found a great example on the web, copied the structure. The structure I'm basing my code is based on one rect with x, y, width and height attributes animated in a Gsap timeline and an svg clip path appended in a clip path object.

Right now the path is animated, but I can't seem to replicate exactly the effect I want.

Here's the pen of what I was able to do until now:

Here's a video/gif of what I would like to achieve

 

I can use morphSvg or other plugins but I'd like some pointers to use the right tool for the job.

Thanks as usual!

 

See the Pen LYqOjbO by luigi-basile (@luigi-basile) on CodePen

[mvaneijgen]

SVG clip paths are weird. Your image needs to be either part of the SVG via da <image> tag or your SVG needs to be 1px by 1px. Check out this post https://davesmyth.com/clip-path-scaling. If you don't do this there is no way to scale the aspact ratio of your clip path to the image.

 

The example you've linked has multiple clipPaths overlapping each other and scaling and morphing in a staggered fashion. Looks like your shape has just one path, so that is never going to look the same.

 

I've made a demo for my self in the past because I was also baffled how svg clipPaths could work with 'normal' images and this is what I came up with. It is by no means perfect and I've never used it in production, please keep that in mind. 

 

All this has nothing to do with GSAP and keep in mind that we can't provide "how do I recreate this cool effect I saw on another site?" tutorials on these free forums. That said, hope it helps and happy tweening. 

 

See the Pen bGQjVxq by mvaneijgen (@mvaneijgen) on CodePen