You skipped over the animation customization options, but do you know how you would define your own keyframes for you own custom animations? In the view transitions api its done in css, but I'm not seeing it explained in the astro docs how it should be done here.
Yes! Just standard CSS animations. That’s what the browser does. Astro just gives you a few presets to make it easier, but there are a few examples in the docs I scrolled through that should help.
Thanks, Iain! I don’t think so? I wonder if it's possible for Astro to always do a full page reload for anything at the root of your site? That way you don't have to remember to do that? But I'm sure it's edge-cases all the way down and making universal choices like that would cause a bunch of problems.
What could cause my image to not transition like in the video? I am doing exactly the same on a very simple page, yet the image just fades like the rest of the content.
@@CodinginPublic Yea, it just works on a regular img tag not the Image component. Also just on Chrome, not Firefox. Last version of Astro, could be an outdated browser maybe...
Is it possible to work with Astro for e-commerce apps? Can the framework handle functionalities like upselling and cross-selling, or should I stick with Next.js?
It’s definitely possible, but IMO, I think you’ll have a smoother experience with Next right now still. That being said, there are some theme examples in Astro built for e-commerce that you can check out. Depending on your needs, I think Astro could meet your needs? But thinking Next would edge out Astro for more complex e-commerce because the ecosystem around next is built out a lot more for that kind of stuff.
Considering this feature is only supported by chromium browsers, wpuld it be worth it to use this in prod or just use js libraries to do route transitions still?
Hmm. Here are a few things to check: - are you on Astro 3+? - is the ViewTransition component in the head of BOTH pages? - did you check other browsers to see if it works there?
@@CodinginPublic Yup. Did all of those. Doesn't work for any browser. Found out that my application is still in MPA mode. By default those two lines of change should put me into SPA mode but it doesn't for some reason. Browser refreshes on route change in MPA mode.
@@CodinginPublic I looked at your repo, it works fine with my browser. And then I tried a few things on my project. Turns out, simply importing and calling ViewTransitions is not enough - I have to add an anchor tag and click it as well to have it enabled. I cannot simply add two containers with a different color on two different pages and fade into another page with navigation buttons (even though I should) - but when I turn them into anchor tags and style them, with href pointing to each other - I get the desired behaviour. It's still unpredictable though.
Looking quickly at the code, looks like it's in the BasicScripts.astro file here: github.com/onwidget/astrowind/blob/main/src/components/common/BasicScripts.astro
Someone smarter than me could tell you, but I can’t imagine it would. Each page you land on is a full page refresh the first time and that’s all crawlers would be doing.
how would it? def wouldn't effect the ability for google to scrape since the html is still sent to the browser at the same speed. its just an animation bruh.... static is static
Thanks for demoing this, good stuff!
Glad you enjoyed it!
Unremarkable content! Thank ya, you're fast as light in space
So glad you found it useful!
@@CodinginPublic please how can I find your contents useless
You just said it was unremarkable.
Thanks man, for the issue with the dark mode, i wasted a lot of time triying to fixing.
glad it was a help!
You skipped over the animation customization options, but do you know how you would define your own keyframes for you own custom animations? In the view transitions api its done in css, but I'm not seeing it explained in the astro docs how it should be done here.
Yes! Just standard CSS animations. That’s what the browser does. Astro just gives you a few presets to make it easier, but there are a few examples in the docs I scrolled through that should help.
Great stuff! Excited to try this out.
Just curious, can you force the full page reload for, say, all links ending in .pdf or something like that?
Thanks, Iain! I don’t think so? I wonder if it's possible for Astro to always do a full page reload for anything at the root of your site? That way you don't have to remember to do that? But I'm sure it's edge-cases all the way down and making universal choices like that would cause a bunch of problems.
@@CodinginPublic maybe I should try make an extension or a PR to configure it, but it would probably take some thorough knowledge of the source code
What could cause my image to not transition like in the video? I am doing exactly the same on a very simple page, yet the image just fades like the rest of the content.
For anyone having the same issue, for some reason, in my case, this just works using a regular img tag, not the Image component.
Hmm. Not sure? I’d have to see the code. You’ve added transition names for both?
@@CodinginPublic Yea, it just works on a regular img tag not the Image component. Also just on Chrome, not Firefox. Last version of Astro, could be an outdated browser maybe...
Hello, i have the same problem. Did you maybe find the solution ? @@sergi3629
Is it possible to work with Astro for e-commerce apps? Can the framework handle functionalities like upselling and cross-selling, or should I stick with Next.js?
It’s definitely possible, but IMO, I think you’ll have a smoother experience with Next right now still. That being said, there are some theme examples in Astro built for e-commerce that you can check out. Depending on your needs, I think Astro could meet your needs? But thinking Next would edge out Astro for more complex e-commerce because the ecosystem around next is built out a lot more for that kind of stuff.
Considering this feature is only supported by chromium browsers, wpuld it be worth it to use this in prod or just use js libraries to do route transitions still?
Astro has fallbacks for the other browsers, so you can use it in production! Other browsers will get a normal transition.
i already have a template, this one use wow, is there anyway to made this cool transitions works on this case? Thanks!
Yep! Just add that ViewTransitions component to a shared head!
What's the best way to maintain state across routes? Say the count state of a simple React Counter component?
docs.astro.build/en/guides/view-transitions/#maintaining-state
@@CodinginPublic Didn't work with a React component. Works with video though.
I can't seem to get it work from the first step. It just doesn't animate and my browser supports it as well. Not sure what I'm doing wrong.
Hmm. Here are a few things to check:
- are you on Astro 3+?
- is the ViewTransition component in the head of BOTH pages?
- did you check other browsers to see if it works there?
@@CodinginPublic Yup. Did all of those. Doesn't work for any browser. Found out that my application is still in MPA mode. By default those two lines of change should put me into SPA mode but it doesn't for some reason. Browser refreshes on route change in MPA mode.
@@CodinginPublic I made a layout component and put ViewTransitions inside head of that layout component and shared it to both of those pages.
@@CodinginPublic I looked at your repo, it works fine with my browser. And then I tried a few things on my project. Turns out, simply importing and calling ViewTransitions is not enough - I have to add an anchor tag and click it as well to have it enabled. I cannot simply add two containers with a different color on two different pages and fade into another page with navigation buttons (even though I should) - but when I turn them into anchor tags and style them, with href pointing to each other - I get the desired behaviour. It's still unpredictable though.
I use Astrowind with V3 but can't seem to find where to fix the set theme do you know?
Looking quickly at the code, looks like it's in the BasicScripts.astro file here: github.com/onwidget/astrowind/blob/main/src/components/common/BasicScripts.astro
Any idea if this has any bad effect on SEO?
Someone smarter than me could tell you, but I can’t imagine it would. Each page you land on is a full page refresh the first time and that’s all crawlers would be doing.
Gotcha, thank you! @@CodinginPublic
I don't think so, if you use the astro component as well it prevents cumulative layout shift
how would it? def wouldn't effect the ability for google to scrape since the html is still sent to the browser at the same speed. its just an animation bruh.... static is static
The transitions are very slow, does anyone else have this problem?
Huh, I haven't experienced this? I'm wondering if the experience is affected by internet speed?