Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
yatochka-dev opened this issue Apr 30, 2024 · 5 comments
Closed
1 task done
Labels
needs repro Issue needs a reproduction

Comments

@yatochka-dev
Copy link

yatochka-dev commented Apr 30, 2024

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

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Apr 30, 2024
@matthewp
Copy link
Contributor

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.

@matthewp matthewp added needs repro Issue needs a reproduction and removed needs triage Issue needs to be triaged labels Apr 30, 2024
Copy link
Contributor

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
Copy link
Author

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
Copy link
Author

yatochka-dev commented May 1, 2024

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.
image

@bluwy
Copy link
Member

bluwy commented May 2, 2024

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

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale May 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs repro Issue needs a reproduction
Projects
None yet
Development

No branches or pull requests

3 participants