Overview

Most landing page section templates include an animation field (SectionAnimation enum). When set, the section fades, slides, or zooms into view as the user scrolls to it. The default is none — no animation.

Available values

  • none — no animation (default)
  • fade — opacity 0 → 1
  • slideUp — translates up from below while fading in
  • slideLeft — translates in from the right while fading in
  • slideRight — translates in from the left while fading in
  • zoom — scales up from slightly smaller while fading in

Setting it in TinaCMS

Open the TinaCMS editor (/admin), select a landing page section (e.g., a Hero or Feature Grid block), and look for the Animation dropdown. Choose the animation style you want. Save and preview.

The animation fires once when the section enters the viewport — it does not repeat on scroll back.

How it works in code

The animation value from the TinaCMS schema is mapped to a Tailwind CSS animation utility class via the SectionAnimation enum and its companion map. The section wrapper applies the class when the component mounts (intersection observer triggers).

// constants/enums.ts (excerpt)
export enum SectionAnimation {
  None = 'none',
  Fade = 'fade',
  SlideUp = 'slideUp',
  SlideLeft = 'slideLeft',
  SlideRight = 'slideRight',
  Zoom = 'zoom',
}

Tips

  • Use fade or slideUp for most sections — they feel natural and don't distract.
  • Reserve zoom for a single hero or CTA section for visual impact.
  • Avoid animating every section on a long page — it becomes tiring to watch.
  • Users with "Reduce Motion" enabled in their OS settings will see no animation regardless of this field — this is handled by the CSS prefers-reduced-motion media query.