Circular Slide Image - Animation

[bgthedev 0 Likes (Newbie)]

Hi,

 

I am new here and new to greensock as well. One of my friend referred me to this awesome kit.

 

I want to create an animation where there will be 2 different images (similar like before and after image effects with color and black & white image) but unlike, here it will be 2 different images and not a grayscale (so css property may not work).
The second image will cover up/load circular motion.

here is the demo I created

 

In this demo the problem is, as you see, it is noticeable that I have used 2 separate images which is not proper.

Is there a way to create such animation? except clip-path because that does not work with firefox

 

Thanks in advance!

 

BG

See the Pen wzrGxJ by bgthedev (@bgthedev) on CodePen

[OSUblake 18,534 Likes (Superhero)]

Hi @bgthedev,

 

Most of these new CSS features coming out are based on SVG, and SVG is pretty much universally supported, so use SVG instead. Check this out. You can set the start angle to whatever you want, just make sure the end angle is equal or larger. 

See the Pen QKEjwv by osublake (@osublake) on CodePen