A story of CSS and an amazing team
A few weeks ago, Amy helped us make animations real in Views and Tom went nuts. He wanted everything that could move to do it. Designers always want that… 🙈But who’s to blame? Animations bring your apps to life!
In this case, he wanted the list of props in Views Composer — props change how blocks look and feel — to feel alive as you open and close the sections with a smooth effect as if it was fading in from the top. In View, this is all it takes:
Prop Vertical
opacity 1
translateY 0
when <before
opacity 0 spring
translateY -10 springwhen is Views way to change prop values when something external happens, we call those scopes. In React lingo they’re regular props that you pass to your view. The before scope is meant to be a system scope like hover but until it is we’ll need to implement it by hand. I made a little Stagger component just for that — by the way, @reactions/component rocks, thanks Ryan!
The animation was perfect but the issue we are about to see didn’t manifest itself until we saw popups inside props doing this:
Sure we missed a zIndex somewhere, right? To my surprise, the popup had it already, and no variation would make a difference. Even worse, if the Prop view looked like this it would work just fine:
Prop Vertical
opacity 1However, the moment you put a bit less than 1, say 0.99, or if you added the translateY 0, it would just break again.
Thankfully Amy remembered this nice write-up “What No One Told You About Z-Index” from a while back. The gist is that a combination of opacity or transform on the parent — the Prop — seem to be creating what’s called a new stacking context effectively moving their children -the popup in this case- below the following rows of props.
Tricky isn’t it? Not for Tom. As I shared our findings, he asked: “Should each item on the list get a lower zIndex as the index of the element gets higher then?” Spot on. We reversed the stacking contexts of our rows of props by applying a zIndex like: total amount of props — index.
I’m humbled and delighted to work with such amazing people that are always ready to help one another!
To Amy and Tom, our Views core team, thanks and cheers! 🍻
Views is a new open-source language to produce working cross-platform React apps fast. Views Tools enables designers to be part of the final product without having to write code. The Views Tools beta will be out soon!
