I created this page transition experiment using 2 custom interactions and some classes to create the effect.
How it works
This first interaction is added to the page load event.
This interaction does the following:
-
Removes a class (page-start) from the page body that initially forces the page to be transformed and hidden.
-
It then adds a class to revert that and animate the page in (page-fadein).
-
It then adds a pause (2 seconds) in order to let the CSS animation complete.
-
After the pause it removes the animation class as it is no longer needed.
The button on this page is connected to a custom interaction, so when it’s clicked it goes to another page.
The button also has a custom attribute assigned, this will be used by the custom interaction thanks to the new data() short code. Note that it’s a page url.
When this button is clicked it will trigger the Navigate to Page custom Interaction. This interaction does the following.
- Add a class (page-fadeout) to the page body to animate the fade out using CSS transform and transition.
- There is a pause of 1 second to allow the animation to complete.
- Then a navigate to URL rule is used that uses the data() short code to get the target url from the button (via its data attribute)
The destination page uses the exact same custom interactions on page load and button click, the only difference is the button on the second page has a different data attribute to lead back to the home page.
This experiment requires Blocs for Mac 6.1.
You can download it here 
Fade in out Page load experiment.bloc.zip (1.3 MB)
Have fun 
