PropFLIP

Back on my FLIP obsessions: this time invert is 4 @property's and play is a transition. Callin it PropFLIP cuz it flips with props 😅 Flip it Punch it, mid-flight too! Maybe that doesn't look that impressive, but it's packing a punch: x, y, scalex and scaley get their own duration, easing, and delays interruptible layout animation border radius maintained CSS led The effect is thanks to @property and some JS. Baseline browser support Layout doesn't animate # So, something changes layout right? A card moves to a new grid cell, a list reorders, a box grows. You want it to glide there, so you reach for: .box { transition: left .5s, top .5s, width .5s, height .5s; } which runs layout every frame, aka janky. The height being in there alone is asking for trouble, everything below it has to move every frame too. Needless to say, animating layout related situations is tricky. Shameless plug here for my new CSS library Anchored Auto Layout, which can animate a very cool amount of layout…

Commenting on Bubbles has been removed. Why? If you want to talk about this post, write to the author, use the comments on their blog if it has them, or reply with a "RE:" post on your own blog. Suggestions? feedback@bubbles.town