astro-vtbot
Advanced tools
No, its NOT a roBOT 🤖, its a 👜 Bag of Tricks!✨
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 Component:
<LoadingIndicator/>is added per default whenastro-vtbotis installed as an Astro integration withnpx astro add astro-vtbot.
🎥 The bag of tricks now includes pre-built animations that you can use with your view transitions, just like Astro's built-in
fade()andslide()! Use vtbot'szoom()andswing()with Astro'stransition:animateor enjoy completely new freedom in designing view transitions using the advanced parameterization options and the new<AnimationStyle/>component!
The astro-vtbotpackage isn't a monolithic library. Use the components you need and only pay bandwidth for those.
| Component | Brotli bytes added |
|---|---|
| Linter 🧹 | ~2k |
| VtBotDebug 🐛 | ~2k |
| ReplacementSwap ↹ | ~0.5k |
| LoadingIndicator ⏳ | ~0.5k |
| Zoom 🔎 | ~0.5k |
| Swing 🎷 | ~0.5k |
| Portal 🚪 | ~0.3k |
| NoScroll 📜 | ~0.2k |
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.
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.
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.
1.4.1 - 2024-01-22
chores & typos
FAQs
The 👜 Bag of Tricks ✨ for Astro's View Transitions
The npm package astro-vtbot receives a total of 5,807 weekly downloads. As such, astro-vtbot popularity was classified as popular.
We found that astro-vtbot demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
