Skip to content

Commit

Permalink
+ CamShaft
Browse files Browse the repository at this point in the history
  • Loading branch information
martrapp committed Oct 4, 2024
1 parent 400371f commit c97c963
Show file tree
Hide file tree
Showing 5 changed files with 357 additions and 374 deletions.
8 changes: 6 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,15 @@ A current deployment of tech demos and the documentation can be found at https:/

## !!! NEW TRICKS ✨ IN THE BAG πŸ‘œ !!!

New component for cross-document view transitions: The `<TurnSignal>` enables Astro's forward/backward animations provided by `transition:animate` to work with native cross-document `@view-transition{}`. Slide right and left as you traverse the browser's history! Optionally you can configure the component with a total order of your site's pages, allowing it to automatically detect the transition direction.
New component for browser-native cross-document view transitions: The `<CamShaft>` component prevents the pseudo-smooth-scroll effect caused by view transition groups that exceed the height of the viewport when navigating to a different vertical scroll position.

For details, see the [CHANGELOG of the Bag](https://github.com/martrapp/astro-vtbot/blob/main/CHANGELOG.md) and of the [CHANGELOG of the InstructionChamber](https://github.com/vtbag/inspection-chamber/blob/main/CHANGELOG.md) for minor improvements regarding the Chamber.
<!--For details, see the [CHANGELOG of the Bag](https://github.com/martrapp/astro-vtbot/blob/main/CHANGELOG.md) and of the [CHANGELOG of the InstructionChamber](https://github.com/vtbag/inspection-chamber/blob/main/CHANGELOG.md) for minor improvements regarding the Chamber.-->


## Recently Learned Tricks ##

> The `<TurnSignal>` enables Astro's forward/backward animations provided by `transition:animate` to work with native cross-document `@view-transition{}`. Optionally you can configure the component with a total order of your site's pages, allowing it to automatically detect the transition direction.
> The `<ElementCrossing />` is a component for those of you who experiment with CSS-only cross-document view transitions and miss a way to preserve state of HTML elements across navigation: Transfer selected element state to the other side!
> Inspection Chamber: See your view transitions like never before: examine every detail, reveal, debug, and optimize! Now, drill down into the effects of each pseudo-element introduced by the view transition API and even selectively toggle individual animations to better understand what’s happening! Summon the Inspection Chamber as a component ([&lt;InspectionChamber />](https://events-3bg.pages.dev/library/InspectionChamber/)) or [install The Bag as an integration!](hhttps://events-3bg.pages.dev/library/Installation/#installing-as-an-astro-integration) and access the Chamber from the **devToolbar**!
Expand All @@ -45,6 +47,7 @@ Animation Style ✨| ~0.1k
AutoNameSelected πŸ“› | ~0.3k
BorderControl πŸ›‚ | ~0.1k
BrakePad πŸ¦₯ | ~0.2k
CamShaft 🐫 | ~0.6k
ElementCrossing 🚸 | ~1.2K
InspectionChamber πŸ”¬ | ~27k
Linter 🧹 | ~1.9k
Expand All @@ -58,6 +61,7 @@ ReplacementSwap β†Ή | ~0.5k
Starlight &hellip; 🌟 | ~3.0k
SwapSound πŸ”Š | -0.3k
Swing 🎷 | ~0.1k
TurnSignal πŸ”™ |~0.5k
VtBotDebug πŸ› | ~2.8k
Zoom πŸ”Ž | ~0.1k

Expand Down
13 changes: 13 additions & 0 deletions components/CamShaft.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
import shaftURL from '@vtbag/cam-shaft?url';
export interface Props {
viewTransitionNames?: string;
}
const { viewTransitionNames } = Astro.props;
---

<script
is:inline
{...viewTransitionNames ? { 'data-view-transition-names': viewTransitionNames } : {}}
src={shaftURL}></script>
1 change: 1 addition & 0 deletions components/CamShaft.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default function CamShaft(_props: import('./CamShaft.astro').Props): any;
Loading

0 comments on commit c97c963

Please sign in to comment.