How to configure animations

[levino]

This question is actually more about the website than the library:
I find the transition from / to /demos very nice. I see that you are configuring the duration for the animation:
https://github.com/martrapp/astro-vtbot-website/blob/0600efd866fd9987a6ec364e359471a5503203c6/src/pages/index.astro#L102-L105

Since you never set a transition:animate property, the transition should be the default fade, right? I was able to replicate this more or less in my project (so during the transition an element gets kind of zoomed in on) but the animation is much faster than for your website. Is there anything else that sets the speed of that transition?

I hope you do not mind me asking this very basic question which is maybe more an astro support question, but it seems that you @martrapp know the ViewTransition API quite well...

Thank you for your time!

[martrapp]

Hi @levino, I am very happy if I can try to help you with your quest.

The relevant transition:names for the morphs from / to /demos are bot (The Bag Logo) and demos (the "Tech Demo" button. There is a browser generated fade-out for the old image and a fade-in for the new image, but the morph effect you see is mainly caused by the group() animation that the browser generates for each complete image-pair.

The duration value is in deed not generated with transition:animate but directly defined as CSS. You have to look into the to page for this styling because the styling is applied after the swap() to the new page. /demo uses the MdxLayout and there you find https://github.com/martrapp/astro-vtbot-website/blob/311ee92dbc73f941d5dbe0935222dc79f3c750ce/src/layouts/MdxLayout.astro#L39-L42

When you go back to "/" the styling is also taken from the "to" page. But "/" has no explicit styling for any ::view-transition-group(), so you get the 250 ms default duration. That is the fast morph you also see on your site.

So to have a slower 1s morph, add something like this

::view-transition-group(bot),
::view-transition-group(demos) {
  animation-duration: 1s;
}

on both pages or a common Layout.

More on animations including the group / morph animations can be found in the Jotter