Skip to content

jan-dh/morphull

 
 

Repository files navigation

Morphull - Astro Starter Kit

A morphing or full page transition enabled slide creation starter kit that uses View Transitions to do all the work.

Until View Transitions are supported across all browsers, this API and starter kit only works in Chrome Canary with chrome:https://flags/#view-transition-on-navigation enabled.

🚀 Project Structure

Inside the /pages folder you create your slides, each slide is it's own Astro component that uses the /src/layouts/Slide.astro layout.

There's one component called Controls.astro that handles making and placing the next arrow.

How to get morphing slide pages

It's all generally handled for you! Just use <h1> elements, or images or links. Inside the /src/styles/transitions.css you'll find the unique names given to the elements that tells the browser which shared elements should morph. Like if you have a code snippet on one page, and the next page also has one, the browser will transition between those snippets.

About

Astro starter powered by MPA view transitions

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 54.8%
  • Astro 44.1%
  • JavaScript 1.1%