Demo: Different page transitions based on clicked anchor with smoothState.js
This demo shows how to switch transitions based on initiating link with smoothState.js. This solution has been inspired by @pudgereyem's comment on smoothState.js #143.
You can view the demo here.
The demo implements a crude idea of viewports that are horizontally aligned to determine the needed animation: every anchor has a numeric
data-target paramter that represents the needed viewport while every scene element provides a numeric
data-viewport parameter that reprents the current viewport. If the viewport requested for the clicked target is larger then the current viewport, the scene element is moved to the left, else to the right.
The logic to determine the wanted animation is implemented in the
onBefore callback, the animations themselves are defined as pure CSS animations. Please feel free to take this as a starting point to implement you own animation logic.
To install this demo, copy all files to the root of your local webserver.
Alternatively, you can use the builtin static webserver.
- Install Node.js dependencies:
- Start webserver
- You can now access the demo site under
If you need to change the used port to
npm config set smoothstate-transitions-demo:port PORT.