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 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 !!!

The bag of tricks now includes pre-built animations that you can use with your view transitions, just like Astro's built-in fade() and slide()! Use vtbot's zoom() and swing() with Astro's transition:animate or enjoy completely new freedom in designing view transitions using the advanced parameterization options and the new <AnimationStyle/> component!

The Jotter

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

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 the example folder.

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?

Its all here and growing😊

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

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

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

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

Changelog

1.3.1 - 2024-01-20

Patch Changes

• 364cb09: Exposes the adapter() function from the FishPond tech demo in animation-style-ts to allow for non standard names with transition:animate={}