Component
Expand Activities Animation in Framer
About the resource
To create this activities dropdown panel, I built a component with just two variants, a compact default state and an expanded state that reveals all the activity items. In the default state, all the activity items are sitting there quietly in the background with a blur and 0 opacity, positioned absolutely and basically waiting for the trigger. Once the variant is transitioned, they fade in to full opacity.
The interaction is just a clean switch between the two variants, with a large invisible close trigger layered behind the expanded view, so clicking anywhere on the canvas takes you right back to the default state.
About the resource
To create this activities dropdown panel, I built a component with just two variants, a compact default state and an expanded state that reveals all the activity items. In the default state, all the activity items are sitting there quietly in the background with a blur and 0 opacity, positioned absolutely and basically waiting for the trigger. Once the variant is transitioned, they fade in to full opacity.
The interaction is just a clean switch between the two variants, with a large invisible close trigger layered behind the expanded view, so clicking anywhere on the canvas takes you right back to the default state.
About the resource
To create this activities dropdown panel, I built a component with just two variants, a compact default state and an expanded state that reveals all the activity items. In the default state, all the activity items are sitting there quietly in the background with a blur and 0 opacity, positioned absolutely and basically waiting for the trigger. Once the variant is transitioned, they fade in to full opacity.
The interaction is just a clean switch between the two variants, with a large invisible close trigger layered behind the expanded view, so clicking anywhere on the canvas takes you right back to the default state.
The expand activities component and its variant.
The expand activities component and its variant.
The expand activities component and its variant.
