Create an Interactive Switch with Progressive Blur and Gradients

Lesson 8 of 15HanaBeginner4 min

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

What you’ll learn

  1. 0:00Intro
  2. 0:15Creating the base shape
  3. 0:39Adding a gradient
  4. 1:04Adding a layer blur effect
  5. 1:46Creating triggers
  6. 1:57Adding the mouse hover event + transitions
  7. 2:24Creating the white stroke + adding states
  8. 3:07Setting transitions for the stroke
  9. 3:35Ending

Related resources