Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/martrapp/astro-vtbot

The 👜 Bag of Tricks ✨ for Astro's View Transitions. ⭐️ Please star to support this work!
https://github.com/martrapp/astro-vtbot

astro components view-transitions

Last synced: about 21 hours ago
JSON representation

The 👜 Bag of Tricks ✨ for Astro's View Transitions. ⭐️ Please star to support this work!

Awesome Lists containing this project

README 

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



[⭐️Please star to support this work⭐️](https://github.com/martrapp/astro-vtbot)



# **The Bag of Tricks** for Astro's **View Transitions**



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



[![npm version](https://img.shields.io/npm/v/astro-vtbot/latest)](https://www.npmjs.com/package/astro-vtbot)

[![Socket Badge](https://socket.dev/api/badge/npm/package/astro-vtbot/)](https://socket.dev/npm/package/astro-vtbot/overview)

![Build Status](https://github.com/martrapp/astro-vtbot/actions/workflows/run-tests.yml/badge.svg)

[![NPM Downloads](https://img.shields.io/npm/dw/astro-vtbot)](https://www.npmjs.com/package/astro-vtbot)



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



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



`` and ``: Added a workaround to handle quoted animation names in Webkit which caused user agent animation names not being recognized in Safari.



**Version 2.0.0 🎉 of astro-vtbot is here!**



The major release changes what is automatically installed if you install astro-vtbot as an Astro integration. Now installing as an integration using `astro add astro-vtbot` should be your default choice for installing astro-vtbot. This gives you access to the `inspection-chamber` on every page via Astro's devToolbar!



In contrast, `` and the `` components will no longer be automatically integrated and must be explicitly added if needed, e.g. in a global Layout.astro. During a transition period, the previous behavior can still be restored using toggles in the astro.config file.



For details, see the [CHANGELOG](https://github.com/martrapp/astro-vtbot/blob/main/CHANGELOG.md).



**On the plus side:** There’s an exciting new mode in the `` component! It allows for view transition types on a per-link basis!

For further information see these demos: [blog demo](http://events-3bg.pages.dev/signal-demo/link-types/blog/), [@vtbag image viewer demo](https://vtbag.dev/viewer-demo/) and the [@vtbag fishpond demo](https://vtbag.dev/link-demo/).



## Recently Learned Tricks ##



> Safari supports cross-document view transitions and the `` component of astro-vtbot learned how to work with Safari.\

For details see the [Changelog of @vtbag/element-crossing](https://github.com/vtbag/element-crossing/blob/main/CHANGELOG.md)



> The recent changes to `` introduced a bug, which has now been fixed.



> The Inspection Chamber DevTools now also work for `pnpm` projects! \

Big shout out and "Thank You!" to [Lukas](https://github.com/Trombach) for providing this fix!



## 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-vtbot`package isn't a monolithic library. Use the components you need and only pay bandwidth for those.

|Component|Brotli bytes added|

|-------|-----------------|

Animation Style ✨| ~0.1k

AutoNameSelected 📛 | ~0.3k

BorderControl 🛂 | ~0.1k

BrakePad 🦥 | ~0.2k

CamShaft 🐫 | ~0.6k

ElementCrossing 🚸 | ~1.2K

InspectionChamber 🔬 | ~27k

Linter 🧹 | ~1.9k

LoadingIndicator ⏳ | ~0.4k

Move 🚟 | ~0.2k

NoScroll 📜 | ~0.1k

PageOffset 📄⇞ | ~0.1k

PointerOnNavigation 👆 | ~0.1k

Portal 🚪 | ~0.2k

ReplacementSwap ↹ | ~0.5k

Starlight … 🌟 | ~3.0k

SwapSound 🔊 | -0.3k

Swing 🎷 | ~0.1k

TurnSignal 🔙 |~0.5k

VtBotDebug 🐛 | ~2.8k

Zoom 🔎 | ~0.1k



Visit [the documentation](https://events-3bg.pages.dev/components/) of the reusable components for detailed information.



- ``: A linter component that helps you identify problems when setting up transitions.



- ``: A Debugging component that logs the events and their data as they occur.



- ``: An alterantive DOM swap(), which preserves elements in the original DOM to avoid reinitialization of iframes or CSS animations.



- ``: Have you ever missed the visual feedback on sites with view transitions as to whether the app has noticed the click? You need a loading indicator! Here you go!



- `Zoom`, `` and `Swing` animations and the `` component allows for extended styling options.



- `` component that forces all view transitions through a portal/loading page.



- `` 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](https://events-3bg.pages.dev/demos/) that show examples of the implementation of various effects using the view transition events.



The sources are in [this repository](https://github.com/martrapp/astro-vtbot-website).



## The Jotter 📓



Last but not least, the deployment also includes the [▶ Jotter ◀](https://events-3bg.pages.dev/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](https://github.com/martrapp/astro-vtbot/discussions).



## Contributing



This package is maintained by [martrapp](https://github.com/martrapp) independently from Astro. You're welcome to contribute by submitting an issue or opening a PR!



## Changelog



See [CHANGELOG.md](https://github.com/martrapp/astro-vtbot/blob/main/CHANGELOG.md) for a history of changes to this package.