Expand and Close - Material Design Gesture

Hello, I’m trying to create this effect from google material design.


Any tips or advice on how to create this?

I understand there is a google material design library out there but my company unfortunately will not buy it.

This looks like slide up. You can simulate this using dynamic panel.

OnLoad

Hide the dynamic panel

OnClick

Show: Dynamic Panel
Bring o Front: Dynamic Panel
Animate: Slide up (Optional)
Set as: Lightbox

If you want the dynamic panel to appear middle of the screen. Just pin to browser

1 Like

@jamesorior is right, try this with dynamic panels (dp) --For the second example with the calendar item expansion you could set up two States in the dp. The initial State 1 would contain the collapsed item (gray box) and OnClick set the dp to State 2, containing the detail view.

There are a lot of subtle things with those transitions which would take a bit more work if you wanted to make it visually similar/same. You can set the background color and opacity for the lightbox effect (the gray background skrim behind the “popup”). You can set a drop shadow on the background widget, specify rounded corners, and set widgets within the dp to move or show with animated transitions. You can even set the widgets to scale their size as the dp fades in and slides up, and scale down as it goes back/away. If you can look into the dev code for these specific effects on material.io then you could probably implement the same math to make the grow/shrink look better. Here is a good thread from several years back showing some nice animation effects replicated in Axure:
https://forum.axure.com/t/some-examples-of-using-the-new-animations-animated-icons-material-design-and-tinder/31329?u=mbc66