Entrance & Exit

Fade In Directional

Also called Fade In Down, Fade In Left, Fade In Right

The element fades in while drifting a short distance from one side into its final position.

Section and card reveals on load or scroll

  • down
  • left
  • right
  • up big
  • down big
  • left big
  • right big
  • top-left
  • top-right
  • bottom-left
  • bottom-right

View demo source

Prompt

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.

Add a "Fade In Directional" entrance animation (also called fade in left, fade in right or fade in down) to [where].
The element should fade in while drifting a short distance from one side into its final position: quick and smooth, easing out as it lands, without bounce.
Play it once, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.