Animations using svelte-motion break in deployed Astro + Svelte website.

[yatochka-dev]

Astro Info

Astro                    v4.7.0
Node                     v20.11.1
System                   Windows (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/react
                         @astrojs/tailwind
                         @astrojs/svelte

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Issue Description:

I'm migrating a React + Framer Motion navbar to Svelte + svelte-motion within an Astro project. Locally, svelte-motion animations (e.g., menu open, link fade-in) work correctly. After deployment, animations stop functioning. Components appear without transitions, and elements that depend on animations may be missing.

### Steps to Reproduce:

Clone and build, then preview (repo) Link to already deployed website On mobile, trigger the menu open animation.

Actual Behavior: The menu opens abruptly without animation, and any links dependent on animations may not appear.

### Potential Hints:

No console errors are observed. The issue seems isolated to svelte-motion animations in the deployed environment.

What's the expected result?

Expected Behavior: The menu should open with a smooth animation, and links should fade in as intended.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-3rjdap?file=README.md

Participation

• [X] I am willing to submit a pull request for this issue.

[matthewp]

Can you provide a smaller example please? Your personal website contains more code than is necessary here. Like I think you probably want to use https://vitejs.dev/config/ssr-options.html#ssr-noexternal config for this problem, but would need to see a minimal repro.

[github-actions[bot]]

Hello @yatochka-dev. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[yatochka-dev]

Link to a minimal reproduction, only with animation that doesn't work for me. As in the real project, when using astro dev, there's no issues at all, everything works as expected. But when the project is deployed using astro build && astro preview, - animations are missing.

[yatochka-dev]

Can you provide a smaller example please? Your personal website contains more code than is necessary here. Like I think you probably want to use https://vitejs.dev/config/ssr-options.html#ssr-noexternal config for this problem, but would need to see a minimal repro.

I tried this with svelte-motion, but it didn't work.

[bluwy]

I tried to debug this but I'm not sure what's failing either. But based on https://github.com/micha-lmxt/svelte-motion/issues/32, it seems like an upstream issue that isn't only happening in Astro.