flip an object

[Josefina]

I'm trying to create this effect.

A hand/paw pushes an object and the object either flips or wiggles a bit and drops something.

The wiggle effect so far looks a bit too strong.

When I try something like:

 

.to("#basket", 1, {rotation:-10, transformOrigin:"right 30%"})

.to("#basket", 1, {rotation:0, transformOrigin:"0"});

The object does not go back to its original spot. 

Any suggestions?

[PointC]

Hi @Josefina

 

Welcome to the forum and thank you for joining Club GreenSock.

 

I'm not 100% sure I understand your question. I would think that transformOrigin change on the second tween would create a bit of a harsh jump. If these are SVG elements you could take a look at smoothOrigin. More info:

https://greensock.com/svg-tips

 

If you could put that into a demo, we could get you better answers. Here's some more info about that:

Happy tweening and welcome aboard.

 

[PointC]

Okay, I just re-read your question and I think I understand what you'd like to happen. Since you're a Club member, you have access to CustomBounce and CustomWiggle: https://greensock.com/wiggle-bounce

 

Using that, you could easily wiggle an element and have another element drop from it. Here's a quick demo with a couple basic divs.

 

See the Pen aYrQgV by PointC (@PointC) on CodePen

Hopefully that points you in the right direction. Happy tweening.

 

[Josefina]

Thank you for the fast feedback. 

I can definitely work with the red box animation.

Thank you!