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