DATA BINDING in Rive: Create a Dynamic Timer
🚀 The Ultimate Guide to Become a Product Designer: https://learnproduct.design
In this video, I'll teach you everything you need to know to get started with Data Binding in Rive! By creating a simple Timer Interaction, we will look at many Data Binding concepts such as Events, Property Groups, Converters, Variables, Timelines, Animation Layers and much more.
🔗 Rive Project: https://rive.app/community/files/23324-43675-timer-with-data-binding/
🔗 Figma File: https://www.figma.com/design/vmaWUZQ3d6CRIQuJ3BvPVv/Rive-and-Play-Tutorials?node-id=3863-158
🚀 Get 2 free months of Skillshare Premium & watch my design course for free: https://skl.sh/2TVhf8z
🚀 Create an account on Mobbin for free:
https://mobbin.com/?via=chethan
🔶 Chapters
00:00:00 Introduction
00:00:56 Preview
00:02:00 Property Groups
00:16:46 Creating Events
00:20:46 Updating Data with Listeners
00:23:32 Calculate Converter
00:28:46 Updating Minutes
00:36:26 Resetting Seconds
00:38:27 Round Converter
00:39:35 Pausing and Resuming Timer
00:45:54 Resetting Timer
00:58:08 Animate Reset Button
01:06:06 Animate Play/Pause Button
01:21:42 Fix: Resetting
01:23:41 Fix: Pausing and Resuming
01:25:27 Data Bind Numbers
01:29:15 Animate Dot Ring
01:32:44 Adding SFX
01:33:40 Data Bind Ring
01:42:54 Easing with Interpolator Converter
01:43:31 Converter Group
01:44:49 Reset Rings
-------------------------------------------
Mega Product Design Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3
Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8
Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi
Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1
After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk
UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW
Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9
Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv
eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
In this video, I'll teach you everything you need to know to get started with Data Binding in Rive! By creating a simple Timer Interaction, we will look at many Data Binding concepts such as Events, Property Groups, Converters, Variables, Timelines, Animation Layers and much more.
🔗 Rive Project: https://rive.app/community/files/23324-43675-timer-with-data-binding/
🔗 Figma File: https://www.figma.com/design/vmaWUZQ3d6CRIQuJ3BvPVv/Rive-and-Play-Tutorials?node-id=3863-158
🚀 Get 2 free months of Skillshare Premium & watch my design course for free: https://skl.sh/2TVhf8z
🚀 Create an account on Mobbin for free:
https://mobbin.com/?via=chethan
🔶 Chapters
00:00:00 Introduction
00:00:56 Preview
00:02:00 Property Groups
00:16:46 Creating Events
00:20:46 Updating Data with Listeners
00:23:32 Calculate Converter
00:28:46 Updating Minutes
00:36:26 Resetting Seconds
00:38:27 Round Converter
00:39:35 Pausing and Resuming Timer
00:45:54 Resetting Timer
00:58:08 Animate Reset Button
01:06:06 Animate Play/Pause Button
01:21:42 Fix: Resetting
01:23:41 Fix: Pausing and Resuming
01:25:27 Data Bind Numbers
01:29:15 Animate Dot Ring
01:32:44 Adding SFX
01:33:40 Data Bind Ring
01:42:54 Easing with Interpolator Converter
01:43:31 Converter Group
01:44:49 Reset Rings
-------------------------------------------
Mega Product Design Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3
Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8
Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi
Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1
After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk
UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW
Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9
Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv
eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)