01 — Page transitions

This template uses Swup.js to transition between pages. This is a Javascript library with a few quirks when it comes to working with it in Webflow. If you look at the site wide custom code (in site settings), you'll see that I destroy and re-initialize the Webflow instance. This is done in order for all native interactions to work properly. You'll also find all Swup.js settings in the site settings.

All containers that you want to transition (in this case the "content" container) nees a class of Transition Fade.

02 — Wordplay.js

When loading the site for the first time, the title in the navigation bar is revealed letter by letter. This is done using WordPlay.js by Waveshape. All settings for WordPlay can be found under the home page custom code.

03 — Contact button

The contact button in the left bottom corner automatically copies whatever email you decide on click. The small script for this can be found in the site wide custom code settings.

04 — Emojidrop.js

When hovering the contact button, you might notice that some unicode characters are dropping on the screen. This is done using Waveshape EmojiDrop.js. All settings for this can be found in the site wide custom code settings.

05 — responsiveness

In order to keep the site properly responsive with this fixed side nav layout, make sure you drop the nav components before the "content" container on all pages. This will keep the nav on top of the page on all breakpoints.