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

View Transition: No directive to just do morphing? #12861

Open
1 task
dreamstar-enterprises opened this issue Dec 30, 2024 · 5 comments
Open
1 task

View Transition: No directive to just do morphing? #12861

dreamstar-enterprises opened this issue Dec 30, 2024 · 5 comments
Labels
needs repro Issue needs a reproduction

Comments

@dreamstar-enterprises
Copy link

Astro Info

5.1.1

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

No response

Describe the Bug

I've tried all the view transition options, but couldn't get my header to morph when navigating from one page to another.
The header is the same, apart from its colour that changes.
When I tried any of these:

https://docs.astro.build/en/guides/view-transitions/#built-in-animation-directives

e.g.

<header transition:name='header'>...

The header would completely fade out and then re-appear. So it went like blue -> disappeared -> red
I wanted it to do more like blue -> red

I tried to create a custom animation with key frames, as also described in the docs, but that didn't work either.

Any ideas?

What's the expected result?

Should just morph (should be option) from old to new state, rather than completely disappear and re-appear

Link to Minimal Reproducible Example

seeabove

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 Dec 30, 2024
@martrapp martrapp added the needs repro Issue needs a reproduction label Dec 30, 2024
@martrapp
Copy link
Member

Hi @dreamstar-enterprises, to me that sounds like Astro's fallback behavior for browsers without native support for view transitions. By any chance, do you experience this on Firefox? If this shows on Edge, Chrome or Safari, could you please add a reproduction?

@github-actions GitHub Actions
Copy link
Contributor

Hello @dreamstar-enterprises. 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.

@github-actions github-actions bot removed the needs triage Issue needs to be triaged label Dec 30, 2024
@dreamstar-enterprises
Copy link
Author

Yes, I tested this on Firefox.
Let me test on Chrome and get back to you

@dreamstar-enterprises
Copy link
Author

dreamstar-enterprises commented Dec 30, 2024 •
edited
Loading

It half works in Chrome.

But the fade effect doesn't work. It just immediately switches.

In Firefox,

the fade effect works, but, it completely fades out and fades back in (so blue -> nothing -> red)

Here is the minimal repoducable code:

import { fade } from 'astro:transitions';

<header transition:name="header" transition:animate={fade({ duration: '0.8s' })}

</header>

@martrapp
Copy link
Member

Firefox has no native support for view transitions yet. This is the last major browser that hasn't.

Astro provides a fallback with some limitations:

  • entry and exit animations are played sequentially, not in parallel (That one bit you)
  • fallback only supports exit and entry animations, no morph animations
    More information on this topic

I can not reproduce that fade doesn't work on Chrome. Just ran you example and it works as expected. Does it look more as you expect when you move the transition:* directives to your <html> element?.

You might also ask for help in the #support channel on Astro's discord: https://astro.build/chat

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs repro Issue needs a reproduction
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dreamstar-enterprises @martrapp