Hi! I was hoping to get some guidance/advice on how best to organize an animation I'm working on.
There's a nice animation from the Things OSX app:
What I'm looking to build is similar to this but actually slightly different.
The animation from Things is actually more straightforward to me, because double-clicking a Todo reflows the contents below it, and there's a lot of stuff in Ember Animated to help there.
What I'm looking to do is render something very similar to the "expanded" state, without "pushing" any of the lower items down. Almost like the expanded state is going to be using position: absolute
to grow & show additional data, but there will still be a placeholder "underneath" to keep the space in the list for the existing items.
I'm having trouble thinking about the best way to go about doing this.
My first thought was to make two different versions of the "card", one collapsed and one expanded. Then, when the user selects an item, really I could just add a visibility: hidden
class to the collapsed, and show the expanded, and then animate it up. I could start out the expanded sprite at the CSS values for the collapsed version, and use motions to smoothly animate the width and text size up to the expanded version.
This approach feels a little hacky to me though, as I really want to smoothly animate out a card from one state to another. It's the same card, just certain dimensions & contents about it are changing.
So, the other approach I thought was to treat the card as a keptSprite
and use something like animated-value
, to animate the card between two different states with like item.isExpanded
. That would give me one conceptual "card" that exists in two different states.
The problem here is that I'd want a placeholder left behind when isExpanded
is true, to hold space in the normal document flow for the items below it. I feel like Sprites are perfect for this since they contain info about their height and width. Is there some way I could use a keptSprite
's information, render a placeholder to the DOM, and then animate that keptSprite myself to the expanded state, setting absolute positioning on it?
I wanted to write up some thoughts here if anyone has any ideas, but I'd also love to jump on a screen share to explain more.
Thanks!