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.

Sign up for GitHub

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

Jump to bottom

ViewTransitions API affecting other page animations after scolling/navigation #8764

Closed
1 task done
ehowey opened this issue Oct 6, 2023 · 2 comments · Fixed by #8767
Closed
1 task done

ViewTransitions API affecting other page animations after scolling/navigation #8764

ehowey opened this issue Oct 6, 2023 · 2 comments · Fixed by #8767
Assignees
@martrapp
Labels
feat: view transitions Related to the View Transitions feature (scope) pkg: astro Related to the core `astro` package (scope)

Comments

@ehowey
Copy link

ehowey commented Oct 6, 2023 •
edited
Loading

Astro Info

Astro                    v3.2.3
Node                     v20.7.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/mdx
                         @astrojs/sitemap

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

Verified it is happening in Chrome and Safari.

Describe the Bug

I created some custom animations (using motion one) for the header on my website which you can view here:

I tested out the ViewTransitions API and added it to my <head> in a root layout component I have. Nice work on this by the way!

The ViewTransitions API appears to affect the other animations on the page after scrolling or navigating. The animations work correctly at first and then they seem to "freeze" an no longer work. To reproduce the bug scroll or move around the page a bit and notice how the fade/scale animations in the header stop working after navigating between pages and it overlaps the text. I believe this is probably some kind of interaction between the ViewTransitions API and my own animations.

What's the expected result?

All other page animations continue to work as intended.

Link to Minimal Reproducible Example

https://github.com/ehowey/erichoweydev/pull/39

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 Oct 6, 2023
@martrapp martrapp added pkg: astro Related to the core `astro` package (scope) feat: view transitions Related to the View Transitions feature (scope) and removed needs triage Issue needs to be triaged labels Oct 6, 2023
@martrapp martrapp self-assigned this Oct 6, 2023
@martrapp martrapp mentioned this issue Oct 6, 2023
Merged
@ehowey
Copy link
Author

ehowey commented Oct 6, 2023

Wow that was fast work! Thank-you!

@martrapp
Copy link
Member

martrapp commented Oct 6, 2023

As you can see from #8767, your issue had quite a history. Glad if I could help quickly :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@martrapp martrapp

Labels
feat: view transitions Related to the View Transitions feature (scope) pkg: astro Related to the core `astro` package (scope)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Revert fix #8472 withastro/astro
2 participants
@ehowey @martrapp