@vtbag/turn-signal
v1.2.2
Published
Turn-Signal is a lightweight script that enhances cross-document navigation by detecting the direction of browser navigation. It enables developers to create smooth, responsive transitions that adjust based on forward or backward navigation, delivering a
Downloads
16,052
Maintainers
Readme
⭐️Please star to support this work⭐️
🔙 The Turn Signal
Turn-Signal: Directional view transitions for intuitive navigation.
The @vtbag website can be found at https://vtbag.dev/
!!! News !!!
The Turn-Signal learned a new trick! With the new link-types
script, you can assign view transition types directly to the links that trigger navigation. This means you can create different view transition animations for the same page, based on the link that takes you there! Simply use data-vtbag-link-types
attributes to set transition types and use them in you CSS to guard your animation rules.
But that's not all: link-types
lets you specify different transition types for history back navigation too!
Check out the image viewer tech demo for a hands-on example and the docs at vtbag.dev/tools/turn-signal.
Happy animating! 🎉
For details see the CHANGELOG.
What happened before?
Transition types and direction attributes are now also determined on the old page!
What is it?
Turn-Signal is a lightweight script that enhances browser-native cross-document view transitions by detecting the direction of browser navigation. It enables developers to create smooth, responsive transitions that adjust based on forward or backward navigation, delivering a more intuitive user experience.
When your pages slide to the left on forward navigation, let them slide to the right when the users goes back in the browser's history.
The script automatically detects the traversal direction and sets backward
, same
or forward
view transition types accordingly. You can also instruct the script to set data attributes on the <html>
element.
If your site has the concept of a previous and next page, the Turn-Signal can automatically generate directional transitions for you.
See the Turn Signal in action and see how it can be customized.