Animation – Once UI

The Animation component provides a simple way to add animations to any element with value-based animation props, configurable triggers, and fine-grained control over timing and easing. Each animation prop accepts a value representing the initial state.

Animation

Trigger fade

Trigger scale

Trigger slide

<Animation fade={0} triggerType="hover" center
  trigger={
    <Row padding="16" radius="m" border="neutral-medium" fit>
      Trigger fade
    </Row>
  }>
  <Row padding="l" radius="m" background="page" border="neutral-medium" center>
    Fade
  </Row>
</Animation>

<Animation scale={0.8} triggerType="hover" center
  trigger={
    <Row padding="16" radius="m" border="neutral-medium" fit>
      Trigger scale
    </Row>
  }>
  <Row padding="l" radius="m" background="page" border="neutral-medium" center>
    Scale
  </Row>
</Animation>

<Animation slideUp={1.5} triggerType="hover" center
  trigger={
    <Row padding="16" radius="m" border="neutral-medium" fit>
      Trigger slide
    </Row>
  }>
  <Row padding="l" radius="m" background="page" border="neutral-medium" center>
    Slide
  </Row>
</Animation>

Types

All animations are value-based - the value represents the initial state, and it animates to the natural end state (opacity: 1, scale: 1, blur: 0, translate: 0).

Types

Blur

Zoom in

Slide up

<Animation blur={8} triggerType="hover" center duration={400}
  trigger={
    <Row padding="16" radius="m" border="neutral-medium" fit>
      Blur
    </Row>
  }>
  <Row padding="l" radius="m" background="page" border="neutral-medium" center width="128" height="128">
    <Icon name="sparkle" />
  </Row>
</Animation>
<Animation zoomIn={1.2} triggerType="hover" center duration={400}
  trigger={
    <Row padding="16" radius="m" border="neutral-medium" fit>
      Zoom in
    </Row>
  }>
  <Row padding="l" radius="m" background="page" border="neutral-medium" center width="128" height="128">
    <Icon name="search" />
  </Row>
</Animation>
<Animation slideUp={1.5} triggerType="hover" center duration={400}
  trigger={
    <Row padding="16" radius="m" border="neutral-medium" fit>
      Slide up
    </Row>
  }>
  <Row padding="l" radius="m" background="page" border="neutral-medium" center width="128" height="128">
    <Icon name="arrowUp" />
  </Row>
</Animation>

Manual trigger

Use the trigger prop with interactive elements like NavIcon or Button. For controlled state (like toggling NavIcon's active state), use triggerType="manual" with the active prop.

Interactive

"use client";

import { useState } from "react";
import { Animation, NavIcon, Dropdown, Option } from "@once-ui-system/core";

function NavIconMenu() {
  const [isActive, setIsActive] = useState(false);

  return (
    <Animation
      trigger={
        <NavIcon onClick={() => setIsActive(!isActive)} active={isActive} />
      }
      slideDown={1}
      triggerType="manual"
      active={isActive}
      duration={300}
    >
      <Dropdown position="absolute" top="48" padding="4" gap="2" radius="l">
        <Option value="option-1" label="Option 1" onClick={() => setIsActive(false)} />
        <Option value="option-2" label="Option 2" onClick={() => setIsActive(false)} />
        <Option value="option-3" label="Option 3" onClick={() => setIsActive(false)} />
      </Dropdown>
    </Animation>
  );
}

Easing

Customize animation feel with different easing curves: linear, ease, ease-in, ease-out, ease-in-out, spring, bounce.

Easing

Spring

Bounce

Ease

<Animation scale={0.8} triggerType="hover" easing="spring" center duration={500}
  trigger={
    <Row padding="16" radius="m" border="neutral-medium" fit>
      Spring
    </Row>
  }>
  <Row padding="l" radius="m" background="page" border="neutral-medium" center width="128" height="128">
    Spring easing
  </Row>
</Animation>
<Animation scale={0.8} triggerType="hover" easing="bounce" center duration={500}
  trigger={
    <Row padding="16" radius="m" border="neutral-medium" fit>
      Bounce
    </Row>
  }>
  <Row padding="l" radius="m" background="page" border="neutral-medium" center width="128" height="128">
    Bounce easing
  </Row>
</Animation>
<Animation scale={0.8} triggerType="hover" easing="ease-in-out" center duration={500}
  trigger={
    <Row padding="16" radius="m" border="neutral-medium" fit>
      Ease
    </Row>
  }>
  <Row padding="l" radius="m" background="page" border="neutral-medium" center width="128" height="128">
    Ease easing
  </Row>
</Animation>

Self trigger

When used without a trigger, animations apply directly to the element.

Card

Fade inFade in on hover

Zoom CardScale up on hover

BlurReveal on hover

<Animation fade={0.4} triggerType="hover" duration={300}>
  <Card padding="l" direction="column" gap="12" fillWidth radius="l">
    <Icon name="heart" size="l" />
    <Column gap="4">
      <Text variant="heading-strong-m">Fade in</Text>
      <Text onBackground="neutral-weak" variant="body-default-s">
        Fade in on hover
      </Text>
    </Column>
  </Card>
</Animation>
<Animation zoomOut={1.1} fade={1} triggerType="hover" duration={300}>
  <Card padding="l" direction="column" gap="12" fillWidth radius="l" href="#">
    <Icon name="star" size="l" />
    <Column gap="4">
      <Text variant="heading-strong-m">Zoom Card</Text>
      <Text onBackground="neutral-weak" variant="body-default-s">
        Scale up on hover
      </Text>
    </Column>
  </Card>
</Animation>
<Animation blur={16} fade={1} triggerType="hover" duration={300}>
  <Card padding="l" direction="column" gap="12" fillWidth radius="l">
    <Icon name="star" size="l" />
    <Column gap="4">
      <Text variant="heading-strong-m">Blur</Text>
      <Text onBackground="neutral-weak" variant="body-default-s">
        Reveal on hover
      </Text>
    </Column>
  </Card>
</Animation>

Portal mode

Enable portal rendering to display animated content in a positioned overlay using Floating UI. Perfect for tooltips, popovers, and hover cards.

Portal

Hover for portal

<Animation
  triggerType="hover"
  placement="top-end"
  portal
  fade={0}
  slideUp={1}
  scale={0.8}
  duration={200}
  trigger={
    <Button variant="secondary" href="#">
      Hover for portal
    </Button>
  }
>
  <Card padding="m" radius="l" maxWidth={20}>
    <Column gap="8">
      <Text variant="heading-strong-s">Portal Content</Text>
      <Text variant="body-default-s" onBackground="neutral-weak">
        This renders in a portal with Floating UI positioning!
      </Text>
    </Column>
  </Card>
</Animation>

Combining animations

Stack multiple animations by providing multiple props. Each value represents the initial state.

Custom

Fade + Scale

Blur + Scale + Slide

<Animation 
  fade={0}
  scale={0.8}
  triggerType="hover" 
  center
  duration={400}
  trigger={
    <Row padding="16" radius="m" border="neutral-medium" fit>
      <Text variant="label-default-s">Fade + Scale</Text>
    </Row>
  }
>
  <Row padding="l" radius="m" background="page" border="neutral-medium" center width="128" height="128">
    <Icon name="layers" size="l" />
  </Row>
</Animation>
<Animation 
  blur={10}
  scale={0.85}
  slideUp={1}
  triggerType="hover" 
  center
  duration={400}
  trigger={
    <Row padding="16" radius="m" border="neutral-medium" fit>
      <Text variant="label-default-s">Blur + Scale + Slide</Text>
    </Row>
  }
>
  <Row padding="l" radius="m" background="page" border="neutral-medium" center width="128" height="128">
    <Icon name="sparkle" size="l" />
  </Row>
</Animation>

API reference

	Type	Default
trigger	ReactNode	—
children	React.ReactNode	—
fade	number	—
scale	number	—
blur	number	—
slideUp	number	—
slideDown	number	—
slideLeft	number	—
slideRight	number	—
zoomIn	number	—
zoomOut	number	—
triggerType	manualhoverclick	manual
active	boolean	—
delay	number	0
duration	number	300
easing	bouncelineareaseease-inease-outease-in-outspring	ease-out
transformOrigin	string	center
childrenPosition How the animated children are positioned inside the wrapper.	CSSProperties["position"]	absolute
reverse	boolean	false
touch Behaviour on touch devices, where there is no hover to drive the effect.	disableenabledisplay	enable
portal	boolean	false
placement	toprightbottomlefttop-starttop-endright-startright-endbottom-startbottom-endleft-startleft-end	top
offsetDistance	SpacingToken	8
…and every FlexProps prop	inherited	—