More Premium Hugo Themes Premium Astro Themes

Morphull

Astro starter powered by MPA view transitions

Morphull

Astro starter powered by MPA view transitions

Author Avatar Theme by argyleink
Github Stars Github Stars: 246
Last Commit Last Commit: Jul 12, 2024 -
First Commit Created: Dec 18, 2023 -
Morphull screenshot

Overview:

Morphull - Astro Starter Kit is a slide creation starter kit that allows for morphing or full page transition enabled slides. It uses View Transitions to handle the animations. Please note that this API and starter kit currently only work in Chrome Canary with the “chrome://flags/#view-transition-on-navigation” flag enabled.

Features:

  • View Transitions: Uses View Transitions to create smooth and seamless animations between slides.
  • Slide Creation: Allows users to easily create slides by using <h1> elements, images, or links.
  • Full Page Transitions: Can enable full page transitions on a per slide basis by passing the animation="page" property to the Layout/Slide component.
  • Custom Page Transitions: Users can write their own custom page transitions by utilizing the provided functionality in Morphull.

Installation:

To install the Morphull - Astro Starter Kit, follow these steps:

  1. Make sure you have Chrome Canary installed.
  2. Enable the “chrome://flags/#view-transition-on-navigation” flag in Chrome Canary.
  3. Download the Morphull - Astro Starter Kit.
  4. Inside the /pages folder, create your slides using Astro components and the /src/layouts/Slide.astro layout.
  5. Use <h1> elements, images, or links to create your slide content.
  6. Customize the transitions by modifying the /src/styles/transitions.css file.

Summary:

Morphull - Astro Starter Kit is a powerful tool for creating visually stunning and engaging slide presentations. It allows users to easily create slides with smooth and seamless transitions between them. The kit provides options for full page transitions and also allows users to write their own custom page transitions. Please note that the kit currently only works in Chrome Canary with the necessary flag enabled.