100% Webflow except for a tiny snippet of custom code in the footer. The snippet adds a 1.3 second delay after page-leave trigger which allows the page-exit animation to fully run.

*Important*
The custom code snippet for page-leave delay is currently set to run when any link ('a') is clicked. To ensure that it runs only when specific classes are clicked, you can modify the code to exclude link classes that should not have a execution delay. 

For example, here is the current footer code (where 'a' is any link, and 1300 is the milliseconds delay):

<script>
$('a').click(function(e) {
  e.preventDefault();
  setTimeout(function(url) { window.location = url }, 1300, this.href);
});
</script>


And here it is modified to exclude fictitious classes .social-icon and .link-cover:

<script>
$('a').not('.social-icon').not('.link-cover').click(function(e) {
  e.preventDefault();
  setTimeout(function(url) { window.location = url }, 1300, this.href);
});
</script>

Transition Utility Pt. 1

Parallax Menu

Basic fullscreen menu with inspiration from developer Rune Hoffman

'Another Menu' Pt. 1

100% Webflow Pre-Load Entrance Animation with one exception. The number counter is using jquery but this can be removed via the custom code panel (footer).

Pre-Loader-Animation

Here's a quick site I put together as a transition site between my old portfolio and an updated version containing more case studies and content that is currently in the works.

Steven Hanley | Transition Portfolio

1. Text Fill (100% Webflow)
2. Character Tween (Greensock's Tweenmax)
3. Smooth Landing (100% Webflow)
4. GIF Background (Custom CSS)
5. Mosemove Warp (Blotter.JS)

Text Hover Animations

qaitomo-new

Comparing 6 different approaches to achieving momentum / inertia scrolling. 

Version 1: SmoothScrolling.JS
Version 2: Luxy.JS
Version 3: Rolly.JS
Version 4: Tweenmax.JS (Greensock)
Version 5: Vanilla JS (A)
Version 6: Vanilla JS (B)

*Make sure you preserve the native scrollbar (ie don't use virtual scroll option) when project contains IX2 scroll-based interactions.

*These are proof of concepts that may need further tweaking/optimizing (especially for mobile browsers). In addition, they override native scrolling behavior which can result in unintended consequences - especially on older browsers.

Inertia / Momentum Scrolling

Beautiful illustration by Masami Kubo brought to life in Webflow with HTML/CSS by yours truly. 😄

Abstracted Control Panel in Webflow

I decided to recreate a nice looking full-screen navigation. This is not my design. Original source: http://publiclibrary.co.nz.

Full-screen navigation

Clean button with surprise circular reveal on hover

007 Button

Multi-Step form using the slider component and some jQuery

Multi-Step Form (Slider + JS)

I animated a cool Shot I found on Dribbble.
Src: https://dribbble.com/shots/3898199-SCNK-Promotional-Website

Niccolò Miranda

About

Skills

About

About