Nutrient Packed Morsels

    @julian_cataldo/astro-transition

    0.10.15 • Public • Published

    🚀  Astro — Full page transition overlay

    This component relies on the good old browser router, still, it will give to your website an SPA feel, without all the JS overhead.

    Demo

    https://user-images.githubusercontent.com/603498/174424456-edce69a7-adef-4e59-b2d8-cfc22414b8a4.mp4

    📦  Installation

    pnpm i @julian_cataldo/astro-transition

    🛠  Usage

    ---
    import TransitionOverlay from '@julian_cataldo/astro-transition/Overlay/TransitionOverlay.astro';
    // ...
    ---
    <!-- ... -->
    <body>
      <!-- Place component just after opening BODY tag (mandatory) -->
    
      <!-- All properties are optional -->
      <TransitionOverlay speed={500} color='white' zIndex={99} />
    
      <!-- ... -->
    </body>

    👨‍🏭  TypeScript API

    export interface Props {
      /** Default: 500 (milliseconds) */
      speed?: number;
      /** Default: 'white' (any CSS notation can be used) */
      color?: string;
      /** Default: 99 */
      zIndex?: number;
    }

    Live website demo documentation

    See /demo/src/layouts/Layout.astro for full implementation demo.


    🔗  JulianCataldo.com

    Install

    npm i @julian_cataldo/astro-transition

    DownloadsWeekly Downloads

    259

    Version

    0.10.15

    License

    ISC

    Unpacked Size

    10.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • julian.cataldo