Web animations code for hero animation

[PuruVijay14]

The hero animation is a tricky animation. Could anyone reproduce its code for Web Animations API. PS:I would prefer if code is a reusable function just like in the original neon animations where we give it config data and everything else.

Thank you

@PuruVijay14

[e111077]

Here is an example I was working on a while ago. It should be under wa/hero

ttn is CSS transitions css is CSS keyframes wa is Web Animations

[addyosmani]

@e111077 Sorry to ping a very old thread. It appears the above Glitch was suspended. Do you know if it's possible to share a remix of it? :)

[e111077]

This is very frustrating that I was not given notice of it being removed. Unfortunately I do not have a copy of the code. Essentially it was implementing "static" animations e.g. fade in those 3 different APIs and attempting the same with "shared" animations that require calculations between two elements using the same API.

If you're looking for hero in particular I essentially used FLIP and for the WA implementation I used the same calculations as in here:

https://github.com/PolymerElements/neon-animation/blob/master/animations/hero-animation.js

I'll contact glitch support to see if I have a chance of recovering the code

[e111077]

scratch that, I was able to recover an old rough draft of the blogpost that was going to be associated with it and I'll scrounge around and slap what I can recover in a gist

[e111077]

Ignore the content as it is from a rough draft of this post. You might want to search the page for "hero" and look at the snippets:

https://gist.github.com/e111077/17720b595707241e1ed361852a03dc23

[addyosmani]

Thank you, @e111077! I can only imagine how frustrating it must have been to see it being removed without notice.

I appreciate you digging out the rough draft with references. It was very helpful!