Jump to content


Peel Token

Moderator Tag
Go to solution Solved by akapowl,

Recommended Posts

I tried to create a peeling effect - please see demo.  Could you please advise on how to make the green circle (front) to animate along with the gradient circle (back)?  They are not in synch.


Would there be a better way to recreate the peeling effect?

See the Pen oNPgwKG by jollygreen10 (@jollygreen10) on CodePen

Link to comment
Share on other sites

It looks to me like the bottom of the peel is being cropped. Maybe consider animating a clip-path for that layer, so you can better tune in the way it moves together?

Link to comment
Share on other sites



This might not be the simplest thing to achieve and it seems a bit beyond the help we can provide in these free forums.


Here is an example that uses CSS to achieve that, I suggest you to study it and reverse-engineer it in order to make it work with images and GSAP:

See the Pen DeZQXw by patrickkunka (@patrickkunka) on CodePen


As you can see there are a quite a few moving parts in this, but I think that with enough tinkering this could be achieved with GSAP.


Good luck with your project.

Happy Tweening!

  • Like 4
Link to comment
Share on other sites

  • Solution
2 hours ago, Rodrigo said:

I think that with enough tinkering this could be achieved with GSAP.


Yeah; quite some time ago I've already explained some basics of GSAP to you and helped re-create that effect in the demo @Rodrigo just now posted, @jollygreen



That animation is nothing that is set in stone with strict rules - and tinkering, testing and exploring is nothing others can take off of your hands if you want to have it a very specific way.


So my suggestion would be to just start from the example we landed on back then and tinker around with each value of each tween, to see what they do until you'll eventually get a feeling for how all of them connected result in the overall visual animation.


I did the same just now and came to this demo - it does not perfectly resemble what I think you wanted to achieve, but it should come pretty close.


Now you could e.g. compare the values from this new codepen to those we landed on back then and see how they differ from each other.


I hope this will help - good luck and happy tinkering.


See the Pen dyqoPwq by akapowl (@akapowl) on CodePen


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