Peel Token

[jollygreen 4 Likes (Newbie)]

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

[elegantseagulls 1,443 Likes (Superhero)]

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?

[jollygreen 4 Likes (Newbie)]

@elegantseagulls - a clip path won't work because the circles will be replaced by images.  

[Rodrigo 5,375 Likes (Superhero)]

Hi,

 

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!

[akapowl 5,215 Likes (Superhero)]

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

 

[jollygreen 4 Likes (Newbie)]

Thank you, @Rodrigo and @akapowl

 

It is so much appreciated!  I'm going to give it a try.