astro-vtbot

No, its NOT a roBOT 🤖, its a 👜 Bag of Tricks!✨

Bag of Tricks for Astro's View Transitions

The bag of tricks provides extensions & support around Astro's view transitions.

A current deployment of tech demos and the documentation can be found at https://events-3bg.pages.dev/

!!! NEW TRICKS ✨ IN THE BAG 👜 !!!

More Starlight Improvements:

Improved sidebar handling: When you navigate to a page that has its entry within a collapsed category, the category is now automatically turned open. If the current page marker is outside the visible part of the sidebar, it is automatically scrolled into view.

If you want to use transition:persist inside the main content area, you can do that now! As of v1.7.8 the <ReplacementSwap /> component handles data-astro-transition-persist attributes within the replaced DOM trees in the same way as Astro's built-in swap() function does.

Recently learned tricks

🌟 STARLIGHT EDITION 🌟

The Jotter now leverages Starlight! The beginning of a more structured and searchable version of the pile of notes that it was.

Starlight Support: Ever wanted to see what your Starlight site looks like with view transitions enabled? Follow these steps to get rid of full page loads and make your Starlight site look like a SPA!

The animation demo got a new row of examples featuring the new move() animation!

Reusable Components 🧩

• In need for extensions for view transitions because you have issues with iframes on your pages?
• Wanting support in understanding and debugging view transitions or simply want a second pair of eyes 👀 on your view transition settings?
• Looking for reusable animations or special transition effects?
• Want to use view transitions on your Starlight site?

The astro-vtbotpackage isn't a monolithic library. Use the components you need and only pay bandwidth for those.

Component	Brotli bytes added
Animation Style ✨	~0.1k
BrakePad 🦥	~0.1k
Linter 🧹	~2.0k
LoadingIndicator ⏳	~0.6k
Move 🚟	~0.5k
NoScroll 📜	~0.1k
Portal 🚪	~0.3k
ReplacementSwap ↹	~0.5k
Starlight … 🌟	~3.0k
Swing 🎷	~0.5k
VtBotDebug 🐛	~2.7k
Zoom 🔎	~0.5k

Visit the documentation of the reusable components for detailed information.

• <Linter/>: A linter component that helps you identify problems when setting up transitions.

• <VtBotDebug/>: A Debugging component that logs the events and their data as they occur.

• <ReplacementSwap/>: An alterantive DOM swap(), which preserves elements in the original DOM to avoid reinitialization of iframes or CSS animations.

• <LoadIndicator>: Have you ever missed the visual feedback on sites with view transitions as to whether the app has noticed the click? Here you go!

• Zoom and Swing animations and the <AnimationsStyle/> component allows for extended styling options.

• <Portal/> component that forces all view transitions through a portal/loading page.

• <NoScroll/> keep the current vertical and horizontal scroll position when transitioning to the next page.

Tech Demos 🔥

The bag of tricks currently contains several technical demos that show examples of the implementation of various effects using the view transition events.

The sources are in this repository.

The Jotter 📓

Last but not least, the deployment also includes the ▶ Jotter ◀ with a wealth of information on transition events as well as background information and valuable tips & tricks on view transitions in Astro.

Some of the contents are technical demos, some are useful tools, and some are reusable components that you can use in your own project to handle edge cases that go beyond Astro's standard features.

Troubleshooting

For help, check out the Discussions tab on the GitHub repo.

Contributing

This package is maintained by martrapp independently from Astro. You're welcome to contribute by submitting an issue or opening a PR!

Changelog

See CHANGELOG.md for a history of changes to this package.