Performance

autoAlpha

autoAlpha is a GSAP shorthand that tweens `opacity` and `visibility` together. When opacity hits 0, GSAP sets visibility to `hidden`; when opacity rises above 0, it sets visibility back to `visible`. The element stops intercepting clicks and reads as 'gone' to assistive tech when invisible, without the layout-collapse of `display: none`.

Updated June 2, 2026

Mechanics

How autoAlpha works

Plain opacity: 0 makes the element invisible but it still intercepts clicks and is still reachable by keyboard and screen readers. Plain visibility: hidden skips the click + a11y issue but doesn't fade - the element snaps in/out. autoAlpha bundles both: opacity for the fade, visibility for the click-blocking + a11y bypass when opacity is 0.

script.js

autoAlpha works on the same end-state values opacity does (0 to 1). The visibility toggle happens AT 0 - any value above 0 keeps visibility: visible.

When

Use autoAlpha for

  • Modals and dialogs that should be fully removed from the click target when closed
  • Tooltips and popovers - clicks on the (invisible) overlay must pass through
  • Menus that should never accidentally intercept clicks when hidden
  • Fade-in/out of overlay layers where you don't want the element to remain a tab stop
  • Any element that's invisible most of the time and shouldn't be a11y-reachable when invisible
Alternatives

Use something else when

  • The element should also reflow the document when hidden - use display: none (JS-toggled), not autoAlpha. autoAlpha keeps the layout space reserved.
  • Fading text that should stay copy-able while invisible - use opacity alone, since selection requires visibility
  • Background decorations that don't need a11y treatment - plain opacity is fine
  • You need pointer-events control but want to keep a11y reachable - use pointer-events: none via CSS instead of autoAlpha
In production

Used in these Annnimate components

  • The Mega Menu uses autoAlpha on the panel overlay so closed panels can't intercept clicks meant for the page beneath
  • The Morphing Dialog uses autoAlpha on the backdrop and dialog so the closed state is fully out of the click + tab order
  • The Tooltip uses autoAlpha on the bubble so the closed tooltip never blocks pointer events on the trigger element
  • The Popping Text uses autoAlpha on the per-character wrappers so pre-reveal characters don't get read by screen readers before they fade in
Used in components

See it running in production

Mega MenuOne dropdown that grows and shrinks to fit as you move between menu groups, opening from whichever side you came from.Morphing DialogA card that grows into a real dialog box, the shared bits sliding smoothly from the card into the open state and back when you close it.TooltipTooltips that follow your cursor or stick to an element, and flip themselves around when they'd run off the edge of the screen.Popping TextLetters pop into place one by one, scaling up from nothing with a little bounce and a random tilt.
FAQ

Common questions

What's the difference between autoAlpha and opacity?
opacity alone fades the visual but the element still intercepts clicks and is still tab-reachable when invisible. autoAlpha fades AND toggles visibility, so at opacity 0 the element is fully out of the interaction model. Use autoAlpha for hidden UI; use opacity alone for decorative fades.
Why doesn't autoAlpha use display: none?
Because display: none removes the element from layout entirely - the surrounding elements reflow. That makes fade-in/out impossible (the element jumps in instead of fading). visibility: hidden keeps the layout space intact, so the fade is smooth and the click/a11y bypass still applies.
Does autoAlpha work with stagger?
Yes - each staggered child gets the autoAlpha treatment independently. Common for revealing a list of items where each should become tab-reachable as it fades in, not before.
Should I set autoAlpha to 0 in CSS for elements that start hidden?
Yes - set the equivalent in CSS: opacity: 0; visibility: hidden;. That way the element is properly hidden before GSAP runs and you avoid the first-frame visible flash. GSAP can take it from there with autoAlpha tweens.
Can I use autoAlpha with prefers-reduced-motion?
Yes - wrap the tween in gsap.matchMedia. Under reduced motion, set the duration to ~0.1s and use ease: 'none'. The visibility toggle still applies; only the fade timing changes.
PreviousGSAP with SSRSSR-safe GSAP is the set of patterns that let GSAP run inside a server-rendered React app like Next.js without crashing the build or flashing on hydration.Nextforce3Dforce3D is the GSAP property that forces an animated element onto its own GPU layer by applying a 3D transform matrix even when the animation is 2D-only.
Related conceptsforce3Dwill-changeexpo.outgsap.matchMedia()