Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
bgthedev

Circular Slide Image - Animation

Recommended Posts

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

Link to post
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 post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×