ANIM-013 · Drawer Slide Up | Zemew AI Design Library

ANIM-013

Drawer Slide Up

Bottom sheet slides upward into view.

More Animations

Options

Sheet-style entrance from the bottom edge.

Details

ID: ANIM-013
Category: Animations
Style: soft
Complexity: moderate
Animation: slide-up
Stable URL: https://zemew.com/guides/ai/library/animations/ANIM-013

drawer sheet slide-up

Recommended uses

Mobile action sheets
Filter drawers

Responsive behavior

Natural on mobile. On desktop, consider a centered dialog alternative.

Accessibility

Trap focus inside the sheet while open and restore it on close.

Code examples

Adapt these to your project. Do not paste unrelated branding or colors blindly.

HTML

<!-- Example scaffold for ANIM-013. Adapt to your project. -->
<section id="ANIM-013" class="ai-design-example" data-zemew-component="animations" data-style="soft" data-version="1">
  <!-- Implement using the live preview as the visual reference -->
</section>

CSS

/* Scope demo styles so they cannot affect the rest of the site */
#ANIM-013.ai-design-example {
  /* mirror the preview treatment for ANIM-013 */
}

Machine-readable metadata

The live preview exposes semantic attributes an AI or developer can read from the page source:

id="ANIM-013" data-zemew-component="animations" data-style="soft" data-variant="sheet" data-animation="slide-up" data-version="1"