ANIM-006

Scale Pop

Quick scale-up pop useful for selected or newly added items.

More Animations

Pop

Details

scale pop emphasis

Recommended uses

  • Selected states
  • Add-to-cart feedback

Responsive behavior

Avoid large scale values on dense mobile layouts.

Accessibility

Respects prefers-reduced-motion by reducing or disabling motion.

Code examples

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

HTML

<!-- Example scaffold for ANIM-006. Adapt to your project. -->
<section id="ANIM-006" class="ai-design-example" data-zemew-component="animations" data-style="modern" 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-006.ai-design-example {
  /* mirror the preview treatment for ANIM-006 */
}

Machine-readable metadata

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

id="ANIM-006" data-zemew-component="animations" data-style="modern" data-variant="pop" data-animation="scale-pop" data-version="1"