Jump to content


Circular Slide Image - Animation

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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! :)



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

Link to comment
Share on other sites

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

  • Like 4
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.