Path Animation and Rotation
Add to favorites
Animating a Thermostat Interface: A Step-by-Step Guide
Play video
Create 3D UI for iOS and visionOS in Spline
1
Intro to Spline for iOS and visionOS
7:25
2
Basic Shapes in 3D Smart Home
10:12
3
Materials, Lights and Effects
12:11
4
Camera Animation and States
7:05
5
3D Thermostat and Cloner
14:38
6
Buttons and Components
8:26
7
Path Animation and Rotation
7:10
8
Create a 3D iOS App Icon
7:09
9
Create a visionOS App Icon
9:53
10
Create 3D UI Scene
9:49
11
Particles Animation
20:30
12
Export to SwiftUI Project
16:20
Animation with Rotation and Mask
To animate the Mask Dash, follow these streamlined steps:
Creating States
- Initiate by accessing the States panel.
- Add a New State by clicking the "+".
- In Base State, navigate to Material/Gradient, setting the Angle to 208 and the middle color stop's opacity to 0%.
- For the new State, revert the Angle to -16 and the opacity to 100%.
Setting Up Events
- Trigger the animation via the Event panel by selecting Start.
Defining Actions
- Create a Transition targeting the Mask Dash layer, transitioning from Base State to the new state over 3 seconds, employing an Ease In Out motion.
Animation with Path
Enhancing the Large Progressive Ring involves a simple depth adjustment.
Creating States
- In the States panel, create a new state.
- For Base State, set the Path Extrusion Depth to 0.
- In the new State, adjust the Depth back to 0.63.
Setting Up Events and Actions
- Similar to the Mask Dash, set up an event starting the transition from Base State to the new state with a 1-second delay, applying an Ease In Out motion over 3 seconds.
Animation with Rotation
Animating the Knob through rotation adds a tactile feel to the interaction.
Creating States
- Repeat the process of creating a new state in the States panel, adjusting Path Extrusion Depth accordingly for both Base State and the new state.
Setting Up Events and Actions
- Set up a Start event to initiate the transition, this time with a 2.5-second delay, ensuring a smooth transition over 1 second using an Ease In Out effect.
Animating the Button
Finalizing with the button animation adds an interactive element to our thermostat.
Creating States for the Button’s Border
- Utilize the States panel to adjust the Material property Depth for both base and new states, paying attention to the pivot direction.
Setting Up Events
- Target the main button component with four dots in the Event panel, adding a Mouse Down event with toggle mode.
Defining Actions
- Define transitions for the button's border and shape, setting transitions from Base State to the new state with a 1-second duration, using Ease In Out and Spring motions for dynamic interaction.
By following these steps, we've animated various elements of our thermostat, adding depth and interaction to the design. Experiment with these animations to fine-tune and achieve the desired effects for your thermostat project.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Assets
Videos
1
Intro to Spline for iOS and visionOS
Comprehensive 3D Design Course: From Basics to Advanced Techniques for iOS and visionOS using SwiftUI
7:25
2
Basic Shapes in 3D Smart Home
Transforming simple shapes into a 3D base for a house model scene
10:12
3
Materials, Lights and Effects
Enhance your 3D scene by incorporating elements from the lore ibrary and adding materials and lighting to add realism
12:11
4
Camera Animation and States
Creating dynamic scenes with the addition of animations
7:05
5
3D Thermostat and Cloner
Learn how to design a thermostat interface with basic shapes
14:38
6
Buttons and Components
Creating knobs and buttons elements and turning them to components
8:26
7
Path Animation and Rotation
Animating a Thermostat Interface: A Step-by-Step Guide
7:10
8
Create a 3D iOS App Icon
Crafting iOS 3D Icons: A Comprehensive Tutorial
7:09
9
Create a visionOS App Icon
Discover how to design the Photos app icon, enhancing the visual experience in visionOS.
9:53
10
Create 3D UI Scene
Learn how to design and implement 2D user interfaces to integrate within 3D scenes, enabling the triggering of actions on any 3D object
9:49
11
Particles Animation
Discover the new particle feature designed to create a range of visual effects like fire, smoke, rain, snow, and other dynamic phenomena
20:30
12
Export to SwiftUI Project
Crafting Stunning 3D Experiences: A Step-by-Step Guide with Spline for iOS Apps
16:20
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Akson Phomhome
UI Designer
Designer at Design+Code.
13 courses - 60 hours
AI Design with Ideogram
Meet Ideogram, an AI-powered image generation tool that takes your ideas and transforms them into stunning visuals. Whether you're a designer, marketer, or just a visual enthusiast, Ideogram simplifies the creative process. In this guide, we’ll walk you through step-by-step instructions to create beautiful logos, social media posts, and more.
1 hrs
Build a SwiftUI app with Claude AI
This comprehensive SwiftUI course combines cutting-edge AI assistance with hands-on development, guiding you through the process of transforming Figma designs into fully functional iOS applications. Leveraging Claude 3.5 Sonnet, you'll learn to efficiently generate and refine SwiftUI code, create reusable components, and implement advanced features like animations and responsive layouts.
9 hrs
Prototype and Code iOS apps in Figma and SwiftUI
Welcome to our course on designing a sleek wallet interface with Figma! You’ll learn to create a visually appealing and functional wallet interface using DesignCode and Apple UI Kits. Master prototyping, swipe gestures, carousel animations, overlays, and reusable components. Plus, explore a Figma plugin to easily transition from design to SwiftUI. By the end, you’ll create dynamic, user-friendly prototypes.
3 hrs
Create 3D UI for iOS and visionOS in Spline
Comprehensive 3D Design Course: From Basics to Advanced Techniques for iOS and visionOS using SwiftUI
3 hrs
3D UI Interactive Web Design with Spline
Learn to create 3D designs and UI interactions such as 3D icons, UI animations, components, variables, screen resize, scrolling interactions, as well as exporting, optimizing, and publishing your 3D assets on websites
3 hrs
Design and Prototype for iOS 17 in Figma
Crafting engaging experiences for iOS 17 and visionOS using the Figma design tool. Learn about Figma's new prototyping features, Dev Mode, variables and auto layout.
6 hrs
Design and Prototype Apps with Midjourney
A comprehensive course on transforming Midjourney concepts into interactive prototypes using essential design techniques and AI tools
8 hrs
Web App Design using Midjourney and Figma
Get UI inspirations from Midjourney and learn UI design, colors, typography as a beginner in Figma
2 hrs
UI Design for iOS 16 in Sketch
A complete guide to designing for iOS 16 with videos, examples and design files
3 hrs
UI Design Android Apps in Figma
Design Android application UIs from scratch using various tricks and techniques in Figma
2 hrs
UI Design Smart Home App in Figma
Design a Smart Home app from scratch using various tricks and techniques in Figma
2 hrs
UI Design Quick Apps in Figma
Design application UIs from scratch using various tricks and techniques in Figma
12 hrs
Figma Handbook
A comprehensive guide to the best tips and tricks in Figma
6 hrs
