https://github.com/devferx/view-transitions-api-examples

https://github.com/devferx/view-transitions-api-examples

Last synced: 10 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/devferx/view-transitions-api-examples
• Owner: devferx
• Created: 2023-08-17T03:46:55.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-08-26T20:49:08.000Z (over 2 years ago)
• Last Synced: 2025-02-15T10:42:59.691Z (12 months ago)
• Language: JavaScript
• Size: 1.12 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# View Transitions API

[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fdevferx%2Fview-transitions-api-examples&count_bg=%235B23D1&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com)

- Slides Google IO 2023

## Examples

### Fade In Text

1. Fade In text (Vanilla JS)

   - [Source Code](https://github.com/devferx/view-transitions-api-examples/tree/master/01-fade-in-text)

   - [Demo](https://devferx.github.io/view-transitions-api-examples/01-fade-in-text/)

2. Fade In text (View Transition API)

   - [Source Code](https://github.com/devferx/view-transitions-api-examples/tree/master/02-fade-text-transition-api)

   - [Demo](https://devferx.github.io/view-transitions-api-examples/02-fade-text-transition-api)

3. Fade In text (Custom View Transition API)

   - [Source Code](https://github.com/devferx/view-transitions-api-examples/tree/master/03-fade-text-transition-api-custom)

   - [Demo](https://devferx.github.io/view-transitions-api-examples/03-fade-text-transition-api-custom)

4. Custom Fade In text

   - [Source Code](https://github.com/devferx/view-transitions-api-examples/tree/master/04-animation-text)

   - [Demo](https://devferx.github.io/view-transitions-api-examples/04-animation-text)

5. Fade In text (Reduced Motion)

   - [Source Code](https://github.com/devferx/view-transitions-api-examples/tree/master/05-animation-text-reduced-motion)

   - [Demo](https://devferx.github.io/view-transitions-api-examples/05-animation-text-reduced-motion)

### Simple Button and Text Animation

1. Simple Button and Text Animation

   - [Source Code](https://github.com/devferx/view-transitions-api-examples/tree/master/07-button-simple-example)

   - [Demo](https://devferx.github.io/view-transitions-api-examples/07-button-simple-example)

2. Simple Button and Text Animation (Custom)

   - [Source Code](https://github.com/devferx/view-transitions-api-examples/tree/master/08-button-custom-example)

   - [Demo](https://devferx.github.io/view-transitions-api-examples/08-button-custom-example)

### Galery Example

- [Source Code](https://github.com/devferx/view-transitions-api-examples/tree/master/09-gallery)

- [Demo](https://devferx.github.io/view-transitions-api-examples/09-gallery)

### View Transition API (React Router)

- [Source Code](https://github.com/devferx/view-transitions-api-examples/tree/master/10-view-transition-react-example)

## Resources

- [Smooth and simple transitions with the View Transitions API - Google](https://developer.chrome.com/docs/web-platform/view-transitions/)

- [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)

- [What's new in web animations](https://www.youtube.com/watch?v=oDcb3fvtETs)