Creating a Simple Progress Bar Animation - Rive Tutorial [Part 2]
🚀 Book 1:1 Tutoring Sessions with me and take your Product Design journey to the next level: https://www.learnproduct.design/sessions
In this Rive tutorial, we are going to create a Simple Progress Bar Animation with basic keyframes and easing. This will set the base for us to be able to add logic and conditions to trigger the start of the animation.
Watch the Full Playlist - https://www.youtube.com/playlist?list=PLERed4ILxkJ2OE7WoEvXHiOsm_wnyxMxa
Rive Animation - https://rive.app/community/files/13515-25585-tutorial-duolingo-score-animation/
Play Prototype - https://appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3d67da90401400fTmcZ&e=0
🚀 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 What we will create in this tutorial
00:42 Importing assets from Figma
05:37 Timeline vs State Machine
07:53 Creating the first animation
09:19 Fixing the Path Issue
12:28 Polishing the animation
14:49 Animating the rest of the animation
16:24 Polishing the UI
17:55 Next video →
-------------------------------------------
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 :)
00:00 What we will create in this tutorial
00:42 Importing assets from Figma
05:37 Timeline vs State Machine
07:53 Creating the first animation
09:19 Fixing the Path Issue
12:28 Polishing the animation
14:49 Animating the rest of the animation
16:24 Polishing the UI
17:55 Next video →
In this Rive tutorial, we are going to create a Simple Progress Bar Animation with basic keyframes and easing. This will set the base for us to be able to add logic and conditions to trigger the start of the animation.
Watch the Full Playlist - https://www.youtube.com/playlist?list=PLERed4ILxkJ2OE7WoEvXHiOsm_wnyxMxa
Rive Animation - https://rive.app/community/files/13515-25585-tutorial-duolingo-score-animation/
Play Prototype - https://appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3d67da90401400fTmcZ&e=0
🚀 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 What we will create in this tutorial
00:42 Importing assets from Figma
05:37 Timeline vs State Machine
07:53 Creating the first animation
09:19 Fixing the Path Issue
12:28 Polishing the animation
14:49 Animating the rest of the animation
16:24 Polishing the UI
17:55 Next video →
-------------------------------------------
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 :)
00:00 What we will create in this tutorial
00:42 Importing assets from Figma
05:37 Timeline vs State Machine
07:53 Creating the first animation
09:19 Fixing the Path Issue
12:28 Polishing the animation
14:49 Animating the rest of the animation
16:24 Polishing the UI
17:55 Next video →