Skip to main content

Troubleshooting / FAQ

A quick index of the most common questions and problems. Each animation family's own page also has a "Common problems" section with issues specific to that family — this page is for general questions and cross-cutting issues that don't belong to just one family.

General​

Does Fancy Animations slow down my site? Every extra feature (Mouse, Text, Gradient background) is off by default and only loads its script and CSS once you turn it on. Turning on Optimized CSS file once you've finished building a page trims the stylesheet down to only the classes actually in use.

Does it work with a caching plugin or CDN? Yes. Settings reads already add cache-busting and "no store" headers, so a caching layer can't serve a stale copy of your settings right after you save. If a newly saved animation doesn't show up immediately, see Optimized CSS file — that's a separate, deliberate cache that rebuilds shortly after each save, not a bug. Page caching on its own is fine. Two optimization features found in most performance plugins need Fancy Animations excluded, though: delaying JavaScript and removing unused CSS — see Caching and optimization plugins below.

Do I need Bricks Builder to use this plugin? No — it works with Bricks, Etch, or the native WordPress block editor (with "Gutenberg blocks (Beta)" turned on). Most sites only use one of the three.

What happens to my animations if my license lapses? Nothing on the front end changes — an active license only gates automatic updates, support, and (new in 3.2.0) the AI assistants via MCP feature. It never affects whether animations already built into your pages keep working.

Is there a way for a visitor to turn all animations off themselves? Bricks sites can add the Toggle Animations element to a page (see Builder notes) — a visitor-facing control that remembers their choice in a long-lived cookie.

Caching and optimization plugins​

Page caching, minification and CDNs work with Fancy Animations as they are. Two optimization features need it excluded:

  • Delay JavaScript holds every script back until the visitor first moves the mouse, scrolls or taps. Until then, scroll animations stand still, pinned scenes don't pin, and entrance animations either show without animating or flicker when the scripts finally start.
  • Remove unused CSS keeps only the CSS whose classes it finds in the page's HTML. Fancy Animations adds some of its classes in the browser, after the page loads, so their rules get dropped and animations break or never finish.

Fancy Animations' scripts are already deferred and light, so excluding them costs almost nothing. Add these lines to each exclusion field, one per line:

fancy-animations
fba_
fanim

fancy-animations matches the plugin's files and the CSS it generates in wp-content/uploads/fancy-animations/; fba_ and fanim match the small inline scripts it adds to each page.

LiteSpeed Cache​

  • Page Optimization → Tuning → JS Deferred/Delayed Excludes: add the three lines. Needed when JS Settings → Load JS Deferred is set to Deferred or Delayed.
  • Page Optimization → Tuning → Guest Mode JS Excludes: add the three lines if you use Guest Mode.
  • Page Optimization → Tuning CSS → UCSS Inline Excluded Files: add fancy-animations. Needed when CSS Settings → Generate UCSS is on; this keeps the plugin's CSS whole instead of trimming it.

WP Rocket​

  • File Optimization → Delay JavaScript execution → Excluded JavaScript Files: add the three lines.
  • File Optimization → Remove Unused CSS → CSS safelist: add /wp-content/plugins/fancy-animations/(.*).css and /wp-content/uploads/fancy-animations/(.*).css.

Perfmatters​

  • JavaScript → Delay JavaScript: with Delay all scripts, add the three lines to Excluded from delay.
  • CSS → Remove Unused CSS → Excluded Stylesheets: add fancy-animations.

Other plugins​

Any other performance plugin with a "delay JavaScript" or "remove unused CSS" option works the same way: find its exclusion field and add the same lines. After changing the settings, clear the plugin's cache and check a page with animations in a private window, without moving the mouse first.

Accessibility and reduced motion​

Does this respect "prefers-reduced-motion" automatically? Not unless you turn it on — see Reduced motion. It's off by default, so every visitor sees every animation unless you change that setting; turning it on shows entrance and text animations already in their finished state, and skips page transitions, for visitors whose own system asks for less motion. Scroll trigger animations are deliberately left untouched by this setting, since scroll progress often decides what content is even visible in the first place.

Scroll trigger, pinned scenes and custom CSS​

See the "Common problems" sections on Scroll trigger, Scroll math & custom CSS, Pinned scenes and Sequence / Index / Cover for issues like windows that seem to do nothing, progress that drifts, or a stage that won't stay pinned in Safari.

Entrance, stagger and text​

See Entrance, Stagger and Text for issues like an element jumping right after it animates, a stagger that doesn't cascade, or inline links disappearing from split text.

Hover, mouse, background and cursor​

See Hover, Mouse, Background and Custom cursor for issues like a dead hover transition inside a scroll-animated element, or the custom cursor appearing to do nothing while testing in a builder (it never runs there — see Builder notes).

Bricks: working with custom CSS​

A handful of Bricks-specific quirks come up across nearly every recipe on this site that uses custom CSS, so they're collected here in one place:

  • A breakpoint-specific rule inside a hand-written @media block loses to the base rule. Bricks moves every @media (and @supports) block in an element's custom CSS to the top of the generated stylesheet on save — so a rule meant to override something later in the file now comes first, and loses on source order. Prefer the element's own per-breakpoint custom CSS field (e.g. "Custom CSS — Mobile Landscape") over a hand-written @media rule; if you do write one, prefix its selector with an ancestor class so its specificity wins regardless of order.
  • A %root% { … } block comes out with unbalanced braces. Bricks moves plain CSS properties inside a %root% {} block into its own native controls when you save (expected), but misreads a var(--x, rgba(…)) fallback specifically inside border, background or color and can leave broken CSS behind. Use plain values (not a var() fallback) for those three properties inside %root%.
  • A border or mask-image value breaks. Any CSS function that has commas nested inside another function — color-mix(…), or linear-gradient(… calc(…) …) — can break the same way. Compute the value in its own custom property first (--card-border: color-mix(…);) and write the actual property with a bare var(--card-border).
  • An SVG upload is rejected, or "Invalid signature" appears. Uploading SVG files needs the per-role "Upload SVG" permission under Bricks → Settings → Builder access — ask whoever manages the site to turn it on. Always use source File for an SVG that needs custom CSS to reach its strokes (recipes like SVG line drawing and Journey map depend on this) — never source Code, which requires a code signature specific to that one site.
  • An image fails to import from a URL. The URL's path needs to end in a real file extension (…/photo.jpeg?w=1920 works; a URL like photo-123?… with no extension in the path is rejected).
  • After saving, check the render. Bricks' own render check should report a balanced CSS syntax — see Builder notes.

Still stuck?​

Every animation family page under Animation families and every build under Advanced recipes ends with its own "Common problems" section, written from real, previously-hit issues — check the specific page for the feature you're working with first.