GoKawiilView the live demo
View the live demo
Confession: I did not care much about football as recently as May. But by the time España lifted the trophy last month, I was watching matches I had no stake in, still unable to explain offside.
Somewhere in one of those matches, I noticed what the picture on the screen sometimes did: the grassy pitch slides into one corner and scales down, and the space around it opens up and fills with a sponsor card, a second angle, or the studio desk. You don’t miss a moment of the game.
I'd seen that effect a bajillion times without really looking too hard at it. It's just what television does. But during one of my infamous 2am can’t-sleep iPhone research sessions, I learned it actually has a name: a squeezeback.
The closest thing I’ve seen for this effect on the web is a YouTube video where somebody squeezes the frame in After Effects and renders it out. The layout is a picture, baked in before upload, and the most interactive it gets is a hotspot on top of a motion graphic someone already designed.
Which is strange… because a squeeze is just a layout change, and browsers are very good at layout changes! Do it in CSS and the space that opens is a cell you can put a real element in, chosen at playback instead of in post.
What happens if we put the player in the center cell of a 3×3 grid where the six outer tracks are collapsed to nothing, then animate the track sizes?
A grid with different layouts Check Copied Copy Copy Check Copied Copy Copy .stage { display : grid ; grid-template-columns : 0fr 100fr 0fr ; grid-template-rows : 0fr 100fr 0fr ; overflow : hidden ; transition : grid-template-columns 850ms cubic-bezier ( 0.65 , 0 , 0.35 , 1 ) , grid-template-rows 850ms cubic-bezier ( 0.65 , 0 , 0.35 , 1 ) ; } .stage[data-layout='right-rail'] { grid-template-columns : 0fr 62fr 38fr ; } .stage[data-layout='lower-third'] { grid-template-rows : 0fr 74fr 26fr ; } .stage[data-layout='squeeze'] { grid-template-columns : 5fr 63fr 32fr ; grid-template-rows : 0fr 82fr 18fr ; row-gap : 8.9% ; }
Woah. That's an entire motion system! It doesn’t even need a transform on the video or scaling wrapper or requestAnimationFrame loop measuring anything. The video is a normal grid item in a cell that's getting smaller, and the panels parked in the other cells get revealed as their track values leave zero.
... continue reading