Create an Interactive Switch with Progressive Blur and Gradients

Create an Interactive Switch with Progressive Blur and Gradients

In this tutorial, we'll show you how to create an interactive switch made 100% in Hana using progressive blur + gradients, and a mouse hover event for the interaction. It's an interesting design that can be used in a variety of projects, and we'll walk you through each step.

Remix this demo here: https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

#interactive#switch#hana#progressive#blur#gradients#design#ixd#webdesign#website#ui#ux#spline#tutorial#animation#motion#2d#graphic design#ui design#gaussian blur#motion design#photo blur#lens blur#filter blur#photoshop blur#3d design#tutorial-materials

What you'll learn

  • 0:00Intro
  • 0:15Creating the base shape
  • 0:39Adding a gradient
  • 1:04Adding a layer blur effect
  • 1:46Creating triggers
  • 1:57Adding the mouse hover event + transitions

Related resources

Overview

Hana 2D
3min
Beginner