Wobbly pick-up effect

[daintycode]

Disclaimer: I know this sounds nooby af, but I don't even know how it's called what I want and I do not search for a solution, I search for ideas.(:

Maybe you guys played Hearthstone, or any other card game. When you pick up cards from your hand, they do some wobbly fx (<- I'd appreciate to get to know how to call this shit.) because the card has some elastic physics to it.

My first idea to do this would be using pixi-projection with some easing to it. But then the question is what to apply with easing to let it look right and not completely fucked up?^^
I guess the scaling should to have some easing to it and the 4 corners need to "spread out" with different speeds?

The next thing I thought about where displacement maps. But tbh, I have no idea how this black magic works and how to apply it doing some animated stuff.

Please don't be like "oh you rookie..." - I know I am.
Please don't be like "heres code: ..." - I want to know what I'm doing pls.
Please be like "this is an interesting resource: <link to interesting resource>".

Love.?

[ivan.popelyshev]

Yes. with pixi-projection you can render quad by 4 corners. Yes, te problem is to make easing for those corners, and not fuck it up. I dont know how to do that  At least, performance will be good, better than filters.

As for displacement, you can make repeating texture with trick from https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters#extra-texture-mapped-matrix

You can shift displacement sprite relative to the card, and the effect will be repeated. Dont forget to switch filter off when animation ends.

[daintycode]

The idea of shifting the displacement-map sounds quite interesting, i might give this a try.

But as you stated, I can imagine that this filter would be kinda slow (still smooth but cpu/gpu intense), especially when it comes to low-end devices.

I'll fiddle around a bit and eventually maybe post some result if I achieve something good.