Skip to content

Bump your view transition images into position to avoid pseudo-smooth-scrolling.

Notifications You must be signed in to change notification settings

vtbag/cam-shaft

Repository files navigation

⭐️Please star to support this work⭐️

🐫 The Cam-Shaft

Cam-Shaft: Bump your view transition pseudo-elements into place to avoid that unexpected pseudo-smooth-scrolling effect.

Build Status npm version minzip NPM Downloads

The @vtbag website can be found at https://vtbag.dev/

!!! News !!!

The Cam-Shaft should now also work for browsers that support cross-document view transitions but have no support for the Navigation API (looking at you, Safari).

For details see the CHANGELOG

What is it?

When you assign a view-transition-name to an element that is larger than the viewport, the View Transition API adds a default animation to the ::view-transition-group() of the element that makes instant scrolling look like smooth scrolling. The Cam-Shaft bumps and nudges your view transition pseudo-elements back into place to avoid that pseudo-smooth-scrolling effect.

See the Cam-Shaft in action and see how it can be used in your own projects.