Lessons Learned about animations HOT 2 OPEN

Sliding old tab contents out and new tab contents in is not good practice. If we only animate using the best performing css styles, then this type of animation results in the old tab contents still being present in the dom after sliding out of view, and accounted for in determining the bottom of the page. This results in a tab with short contents potentially having a scrollbar that’s intended for viewing the contents of the hidden tab with longer contents.

from animations.

Sliding decorative elements (i.e elements with no meaning) from one element to another is really not possible, such as in the case of the top blue border on the active tab. We can create a background gradient to produce this decorative element, and animate background position of the parent element to avoid adding unnecessary elements to the dom, but this requires the parent to know which child is active. And animating background image positions might not perform that well.

from animations.