Designing a 3D toggle button micro-interaction with Spline

Designing a 3D toggle button micro-interaction with Spline

In this tutorial, you will learn how to use the events and states system to create micro-interactions and build a toggle button in 3D.

☀️ Update: Spline is improving fast, and now there is a new way to achieve the toggle effect without using invisible objects.

Check this tutorial for more: https://www.youtube.com/watch?v=lJIDSiDlhvw&t=10s&ab_channel=Spline

☀️Update 2: The new Components can be used to create variations of your 3D UI elements.

Tutorial about components here: https://youtu.be/VSddFnDjPUA

#designing#toggle#button#microinteraction#spline#3d#tutorial#3d design#toggle button#3d toggle#3d modeling#interactive 3d#animation#tutorial-interaction

What you'll learn

  • 0:00Introduction
  • 0:20Making the toggle shapes
  • 1:40Creating materials
  • 5:45Creating the event triggers
  • 8:47Creating the states
  • 11:30Adding micro details

Overview

Spline 3D
13min
Beginner
Similar Tutorials
Spline V2 Full Tour: New Layout, Faster Creation, Agent Workflow

Spline V2 Full Tour: New Layout, Faster Creation, Agent Workflow

Video9minBeginner
Build Interactive Animations: Morphing UI & Reactive Glow in Hana (Step by Step)

Build Interactive Animations: Morphing UI & Reactive Glow in Hana (Step by Step)

Video13minBeginner
How to add a 3D Drag & Drop interaction in Spline | Level up your website in just a few clicks

How to add a 3D Drag & Drop interaction in Spline | Level up your website in just a few clicks

Video4minBeginner