JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3298
  • Score
    100M100P100Q150774F
  • License ISC

The Cam-Shaft bumps your view transition images into place to avoid the pseudo-smooth-scroll effect when applying view transitions to elements that are taller than the viewport.

Package Exports

  • @vtbag/cam-shaft

Readme

⭐️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.