neon-animations are affected by previous animations or transforms

[govis]

Description

neon-animations such as scale-up-animation maybe affected by previously executed animations and/or transform(s)

On a page with animated cards contents of some previously animated cards gets shifted to the top left corner of the page during animation while other cards remain intact. The behavior seems somewhat sporadic.

might also be related to #207

Expected outcome

Actual outcome

Live Demo

https://jsbin.com/tanozaqoyo/edit?html,output

Cards are animated with transform-animation from translateY(100%) to none (initial entry) and/or scale-up-animation animation (reload with new content). It appears that card content (image and text) maybe re-rendered in a wrong place (upper-left corner of the page - outside of the actual card bounds).

Steps to reproduce

Load the page wait for cards to enter and first card to scale up, click "Load More" button. You should see an image pop up in the top-left corner of the page on the next card spin.

Removing the initial entry animation seems to alleviate this:

https://jsbin.com/hopaqusegu/edit?html,output

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[govis]

I might be closing in on the actual issue and it seems to be related to running multiple animations sequentially. Still not sure how to resolve it, tried calling cancelAnimation, switching from async to requestAnimationFrame.

Is there a way to run some sort of a clean-up routine to reset the state of the animation?