https://github.com/teotimepacreau/view-transitions-api-day10-of-100daysofcode

View Transitions API SPA built with VanillaJS, CSS, HTML
https://github.com/teotimepacreau/view-transitions-api-day10-of-100daysofcode

100daysofcode animation art baroque caravaggio css html painting vanilla-javascript view-transition view-transitioning view-transitions view-transitions-api

Last synced: 3 months ago
JSON representation

View Transitions API SPA built with VanillaJS, CSS, HTML

• Host: GitHub
• URL: https://github.com/teotimepacreau/view-transitions-api-day10-of-100daysofcode
• Owner: teotimepacreau
• Created: 2023-03-23T21:57:53.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-03-23T22:18:39.000Z (over 3 years ago)
• Last Synced: 2025-12-04T08:57:23.973Z (8 months ago)
• Topics: 100daysofcode, animation, art, baroque, caravaggio, css, html, painting, vanilla-javascript, view-transition, view-transitioning, view-transitions, view-transitions-api
• Language: CSS
• Homepage: https://teotimepacreau.github.io/View-Transitions-API-Day10-Of-100DaysOfCode/
• Size: 5.72 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# View Transitions API on SPA

![View-transition-api-demo](https://github.com/teotimepacreau/View-Transitions-API-Day10-Of-100DaysOfCode/blob/main/View-transition-api.gif)

# Project goals

- View Transitions API experimentation : understanding principle of implementation with VanillaJS .startViewTransition and DOMChanges activator. 

- Transition composed by opacity and left to right

- Customize transitions with ::view-transition-old(root) and ::view-transition-old(new) in CSS

- Playing with button styling and ellipses

# 🛠️

View Transitions API, Vanilla JS, CSS, HTML