✳flâneur — a map of the web's best reading

Morph Surface

devouringdetails.com · 866 words · saved by 1 readers

I commonly see these types of interactions on social media, but they are easy to build in a way that feels confusing. Let's first look at a reduced example and learn what makes a fluid morphing surface effect. Can you take a look at this broken example and guess what feels wrong here? To me, the Motion choreography is very jarring when the inner contents grow along with the containing surface. There's so much happening at once—not great. There are so many transitions layered here that we really should try to reduce the amount of motion on screen. If we don't move the inner layers and just crossfade between them it feels a lot better because there is less visual clutter on the screen. Let's quickly deconstruct how the prior choreography would look like in code. We are making the feedback form absolute and giving it a constant width and height, and anchoring it to the bottom of the container so that it does not change its position during the transition: Now we can animate width between

Devouring Details Have you ever noticed that some animation sequences can be improved with just a touch of delay? Or that some interactions just feel better without any motion at all? Devouring Details is an interactive reference manual for interaction-curious designers, containing 23 chapters with 23 downloadable React components. All footage is recorded of React components Platform Before working on this I thought to myself: “how have I learned myself?” By trying to build an idea and realising it sucks in practice. With enough iterations and sometimes by accident I’ll get to a place where it

Explore this link on the map →

related reading