View Transitions API

Episode #397 by Teacher's Avatar David Kimura

Summary

The View Transition API makes it easy to change the DOM in a single step, while creating an animated transition between the two states. Currently, it's available in Chrome 111 and Microsoft Edge. In this episode, we'll create a stimulus controller to interact with this new UX.
rails stimulusjs view 18:17

Chapters

  • Introduction (0:00)
  • Installing Active Storage and creating scaffold (1:54)
  • Quick note about off camera styling (3:43)
  • Creating the stimulus controller (4:25)
  • Documentation on View Transitions API (4:43)
  • Adding Stimulus Attributes in the view (6:45)
  • Making the stimulus controller (8:42)
  • Targeting the movie poster with View Transitions (12:31)
  • Demo (16:47)
  • Final thoughts (17:55)
Student & Teacher
$ 9 /mo

Valid School Email Required

Same Access as Pro

Subscribe Now
Pro Monthly
$ 19 /mo

Access to Pro Episodes

Invite to Slack Channel

Priority Suggestions

Ad Free

Subscribe Now
Pro Annual
$ 190 /yr

Access to Pro Episodes

Invite to Slack Channel

Priority Suggestions

Ad Free

Subscribe Now
Teams
$ 57 /mo

3 Users Minimum

$19.00 / user / month

Same Access as Pro

Subscribe to Teams