- Видео 22
- Просмотров 79 946
The Motion Magic
Индия
Добавлен 5 сен 2023
Welcome to The Motion Magic, where creativity meets interactivity! Our online school is your gateway to the captivating world of animation. Join us on this magical journey and turn your passion for animation into a professional skill!
Rive Scroll & Responsive Layout - Part 3 Responsive
Rive helps you build interactive as well as responsive layouts. In this video you'll learn how to setup a simple responsive layout with the artboard size in the state machine. We will use the layout built in the previous videos, checkout the same if you haven't already -
⏮️ Part 2 ruclips.net/video/5qQhgrIWbro/видео.html
Ultimate Rive Course ✨ bit.ly/rive_course
⌛ Timestamps
00:00:00 Intro
00:00:07 Animation
00:03:50 State Machine
00:05:38 Outro
⏮️ Part 2 ruclips.net/video/5qQhgrIWbro/видео.html
Ultimate Rive Course ✨ bit.ly/rive_course
⌛ Timestamps
00:00:00 Intro
00:00:07 Animation
00:03:50 State Machine
00:05:38 Outro
Просмотров: 372
Видео
Rive Scroll & Responsive Layout - Part 2 Scroll Content
Просмотров 367Месяц назад
Rive helps you build interactive as well as responsive layouts. In this video you'll learn how scroll for a layout with the Scroll Constraint and how to snap to next item on scroll. Also, add a custom scroll bar with scroll bar thumb and sync it with our scroll content. Finally we will control an optional animation (nested artboard) with the scroll. It won't be in perfect sync but more than wor...
Rive Scroll & Responsive Layout - Part 1 Setup
Просмотров 639Месяц назад
Rive helps you build interactive as well as responsive layouts. In this video you'll learn how to setup layouts for the scroll and responsiveness. Ultimate Rive Course ✨ bit.ly/rive_course ⌛ Timestamps 00:00:00 Intro 00:00:11 Animation Placeholder 00:03:06 Feature Points 00:07:12 Text In Layouts Issue 00:08:55 Margin 00:11:07 Outro
Deep Dive into Rive Layouts
Просмотров 2,1 тыс.3 месяца назад
With the recent update in Rive, now you can create Layouts to lay-out elements in a structured manner. This will be nothing new if you're coming from Figma using "Auto Layouts", else in this one we will deep dive into Layout in Rive. Ultimate Rive Animation Course ✨ bit.ly/rive_course ⌛ Timestamps 00:00 Intro 01:00 Layout 04:30 Position 07:50 Background 10:05 Column 11:12 Wrap 13:33 Justify 15:...
Cricket Game in Rive - Full Breakdown
Просмотров 6743 месяца назад
In this one, I will perform a breakdown of Cricket Game made entirely in Rive. 🕹️ Plat it yourself - rive.app/community/files/13687-25908-cricket-game/ Rive Course - bit.ly/rive_course We will cover how to prepare assets for animation and create animation timelines. Then we will cover how to build the game mechanism from scratch in state machine. The core of the game is rive events, state mach...
FlutterFlow Rive Animation With State Machine
Просмотров 7034 месяца назад
In this one, you'll learn how to add a Rive animation in flutter flow with custom code. By default, the built-in RiveAnimation widget doesn't support state machines and to get the same working we will use custom widgets. Below you can find the source code for the same - Source Code - pastebin.com/2i3heXTR ⌛ Timestamps 00:00 Intro 01:00 Custom Code 02:05 Parameters 03:30 Custom Widget 10:20 Usage
Rive JavaScript Animation Course - Trailer
Просмотров 5994 месяца назад
A complete guide to integrating Rive animations into your websites using Vanilla JavaScript. Flutter Rive Animation - themotionmagic.com/p/rive-js-course In this course, we'll cover everything you need to know to make the most of Rive JS API. Here is the curriculum overview: - Adding Rive animations - Layout parameters - Load custom font and image assets - Control state machine with inputs - Ri...
Load Custom Font Asset for Rive Animations in Flutter Runtime
Просмотров 3347 месяцев назад
In this lesson you'll learn how to handle out-of-band assets in Rive animations for flutter. Ultimate Rive Animation Course ✨ bit.ly/rive_course ⏳ Timestamps 00:00 Intro 00:50 Load RiveFile 02:30 Handle Asset Loading 05:45 Custom Font Asset 09:00 Load from Network 🔧 Using the Asset Handler API When creating a RiveFile, include an assetLoader callback to manage asset loading dynamically. This ca...
Edit Text Runs of Rive Animations in Flutter Runtime
Просмотров 7158 месяцев назад
Learn how to locate and update text run values within a Rive animation effortlessly in the flutter runtime! Rive Flutter Course - themotionmagic.com/p/flutter-rive-animations ⏳ Timestamps 00:00 Intro 00:13 Edit Run Name 00:50 TextValueRun 03:22 Extension To access the text run, you need the artboard. Using the artboard you can get the TextValueRun object from the component method. The TextValue...
Add Sound Effects to Your Rive Animations
Просмотров 6678 месяцев назад
In this one, you'll learn how to use audio events to play sound effects with your Rive animations. Audio events can be played inside timeline animations, state transitions or listeners. Ultimate Rive Animation Course ✨ bit.ly/rive_course ⏳ Timestamps 00:00 Intro 00:16 Audio Event 01:00 Import Audio 01:30 Listener 02:15 Timeline 03:15 Audio Clip 04:15 Custom Audio
Flutter Rive Event Listeners - Subscribe to Rive Events in Flutter Runtime
Просмотров 6948 месяцев назад
Learn how to add event listeners to your Rive animations in Flutter with this quick guide! Rive Flutter Course - themotionmagic.com/p/flutter-rive-animations ⏳ Timestamps 00:00 Intro 00:55 State Machine Controller 01:50 Add Event Listener 03:55 Event Properties 05:35 setState 🛎️ What are Rive events? With Rive events, you have the ability to subscribe to meaningful signals that get reported fro...
Rive Events - Notify Your Runtime From Rive Animation
Просмотров 2,3 тыс.8 месяцев назад
In this one, you'll learn how to use Rive events to communicate with your runtime. You can report Rive events from timeline animations, state transitions or listeners. Ultimate Rive Animation Course ✨ bit.ly/rive_course Events are a way to send signals to your runtime code to execute a block of code at the right moment. They enhance the communication between designers and developers by passing ...
Rive Flutter Animation Course
Просмотров 7978 месяцев назад
Learn how Rive can enhance your apps and websites with interactive animations. A complete guide to integrating Rive animations seamlessly into your Flutter applications. Flutter Rive Animation - themotionmagic.com/p/flutter-rive-animations In this course, we'll cover everything you need to know to make the most of Flutter's Rive API. Here is the curriculum overview: - RiveAnimation widget prope...
Randomise State Transition in Rive
Просмотров 1,4 тыс.8 месяцев назад
In this one, you'll learn how to randomly transition to a state/animation in Rive state machine. Rive will randomly pick a state/animation to transition into from two or more connected transitions with same condition (if any). Ultimate Rive Animation Course ✨ bit.ly/rive_course Number Dial Animation Tutorial - ruclips.net/video/whfyr6BRl68/видео.htmlsi=nl_8Vy01xEpa_-rc ⏳ Timestamps 00:00 Intro ...
Interactive Number Dial Animation in Rive
Просмотров 1,4 тыс.8 месяцев назад
In this quick one, you'll learn how to create an easy interactive number dial animation in Rive. You can use the state machine number input to change the number with a scroll-like animation. Ultimate Rive Animation Course ✨ bit.ly/rive_course ⏳ Timestamps 00:00 Intro 00:07 Add Text 01:20 Timelines 02:15 State Machine
Rive State Machine For Beginners - Interactive Animation With Rive
Просмотров 13 тыс.11 месяцев назад
Rive State Machine For Beginners - Interactive Animation With Rive
Rive Elastic Curve - Add Spring to your Animations
Просмотров 869Год назад
Rive Elastic Curve - Add Spring to your Animations
Micro Interactions With Rive Animation - Notification Bell Icon
Просмотров 4,9 тыс.Год назад
Micro Interactions With Rive Animation - Notification Bell Icon
How to Create Background Blur Effect in Rive
Просмотров 4,3 тыс.Год назад
How to Create Background Blur Effect in Rive
Rive Animation Tutorial For Beginners - Get Started with Rive Animation
Просмотров 35 тыс.Год назад
Rive Animation Tutorial For Beginners - Get Started with Rive Animation
Ultimate Rive Animation Course - Interactive Animations For All
Просмотров 8 тыс.Год назад
Ultimate Rive Animation Course - Interactive Animations For All
Really good tutorial! Well explained. Thanks for sharing!
Very excited for this video tutorial! Are you still hoping to post this? Very keen to know about swapping fonts at runtime! Mainly, if possible to swap to any font in a repository that sits outside of the rive editor. (or do all fonts need to be put in to rive editor first?). Will stay tuned. :)
Watching rive very nice... But having issues while installing... So no use of watching tutorials
you can always try out the Rive editor in the web - editor.rive.app
Where do you find the Card animation 7.37? Do you create this yourself ? I don't know how to find this kind of illustration. Thanks for sharing your knowledge! :)
Yes, the animation is built in rive. These type of illustrations are mostly not found together. Made for the demo.
How to load fonts in React native?
You can checkout the docs for the same - rive.app/community/doc/loading-assets/doct4wVHGPgC#handling-assets.
@@thamotionmagic it doesn't have react native
@@dushyantdubey1312 react native is subset of react so try it 👍
Thank you! awesome stuff
ruclips.net/video/lGTg3NSlXVU/видео.htmlsi=pGP-uOt8zqGWKWHK
As in? Which video are you talking about?
That's not an android emulator, it's flutter but running on windows.
This is not working for me. I get a compilation error with no description at all. Any thoughts?
That probably means you've an error in the code. Have you used the shared code or made any changes in the same?
You're workk is top notch
awesome stuff
is it possible to use Number Input as Text in artboard? changing this number input change the text (numbers only)
You can't do that but you can use text runs to dynamically change the content in runtime
@@thamotionmagic I was creating 5 states of AQI levels with AQI value in the design. Depending on AQI value, different state will be visible and same value needs to be reflect in Design. AQI value will come from an API. So i was wondering id Number input can be used some how
@@dushyantdubey1312 ofcourse you can still use the same to change the animation (when above 150, or above 250, etc.) and for the text itself update it in runtime.
Hi!) Thank you for lessons!) Please tell me how to make the path wavy. For example, I need the ball to move from point A to point B and the path to be not just straight, but slightly deformed, that is, so that I can change/curve the path
You can make use of the follow path constraint and animate an object along any custom (wavy) path.
@@thamotionmagic Thank you so much!)
subscribed. looking forward to the next rive tutorial
Hi how you do the credit card animation ? do you do it with rive ?
Indeed, it's a Rive animation afterall.
For what its worth, i share your channel with anyone looking for tutorials. :D That's how we pay it forward when we find a good course, but more importantly, a good course without the unecessarily costly fee, I'm finding with other "courses" which pale in comparison to what you are putting out. Yours is a perfect balance. Fan here! happy to send anyone who asks your way.
I'm glad you're finding the content valuable, it's really motivating to hear that. 👍
Thoughts on WEBFLOW with RIVE? Something you can do a course on? Trying to get my RIVE to work with Construct 3... which is a task.
I have planned to create a Webflow + Rive tutorial! As for Construct 3, did you manage to build a JS extension?
@@thamotionmagic Not as of yet. Im' not smart enough for that, but tried to see what it would cost with real developers. The webflow + rive tutorial would be amazing, as for C3? probably a pipe dream, meaning i may need to upgrade myself and learn coding anew...
thanks, awesome tutorial! great work!
Thank you!
Great video Could you explain a little more the javascript code ?
The (nested artboard) animation's number input is hooked with the scroll position/percentage in web JS runtime using the GSAP ScrollTrigger.
Thanks I wonder if the text you use in rive allow web accessibilty ?
You can read more about the same here - rive.app/community/doc/text/docn2E6y1lXo#semantics-for-accessibility
For now, on web the text can't be marked or etc. I hope as well that in the future we'll be able to do that.
So well explained. Thank you!
I haven`t realized something, starting from 15:00, the containers with text and icons began behaving differently. Now they automatically adjust their size when the overall layout size changes. Could you explain how you did this?
The same is done by setting the sizing to "Fill". That way each layout will share the available space.
@thamotionmagic thanks 👍
Can you update your course to include the latest update for Layouts please? SCROLLING in LAYOUTS :D :D
thank you for the tutorial, I also want to know this part as well
Here you go - ruclips.net/video/5qQhgrIWbro/видео.htmlsi=hXXfP1VRzA9H44_F
You can't unwrap it :v
👍
Hi great video does it available in newer versions? rive: ^0.13.18?
Yes it's supported v0.11.14 and above.
Hy for loading indicators can we use shape instead for strock ?
If you mean a shape revolving around the circle then you can use the follow path constraint.
i still dont understand using shift key on mac to move the key frame, please help me :")
in part 41:35 u have to move all key frames completely to 10 frame, i still dont understand how to use the shift key
To move the keyframes by 10 frames, first make your selection and then press Shift + Alt + > (arrow key). I'd recommend you check out ruclips.net/video/kGt1THsI21E/видео.html.
Great tutorial. I do have a question... I want to animate hiding items in the layout, how do I do that?
You can animate that items scale to 0
Yeah I tried that but the spacing wouldn’t change. It still applies spacing for that object
@@syedsufyanpervez7914 make sure the layout child (wrapper) is hugging the content
I will try that. But I really appreciate it if you can do a short video on it. Thank you much
Good tutorial, except that you moved the ball of the bell in the wrong direction! When the bell moves to the left, the ball shouldn't move with it.
Could you tell me which screen recorder you use? The keystroke capture effect appeals to me. @3:07
I use OBS for screen recording and Keyviz for the keystroke visualisation (built-in house)
@@thamotionmagic Thanks.
@@thamotionmagic Thanks. I tried many settings but recording quality of OBS is not good. Can u suggest the best settings for it?
You can find the same on RUclips with detailed instructions. One thing I'd like to point out is your monitor needs higher resolution as well. Previously I had a mid range monitor and recordings out of it looked terrible as well (you can notice in the earlier videos) and that's when I invested in a designer 4k monitor and got satisfactory results.
gui is going to be much easier in godot ( if i manage to learn it with my studys )
Thank you!
I am getting borders in the element when I add a layout, am I doing something wrong?
Nothing wrong, by default Layouts have that as guides. You can disable it from the View Options (top-right).
@@thamotionmagic Thanks a lot :)
I'm so glad someone asked this!
Thank you mate!
Damn, Figma on steroids
Thanks for sharing
Just realized that I could actually build an entire interactive app in RIVE vs using Construct 3 ( ◐ o ◑ )
maybe I'm slow, but i feel like RIVE is a tool that does the CSS, javascript, html for you, then you just interact with it as needed with external inputs.
With the new Layout feature, you can pretty much say that as well.
very intuitive of RIVE to build layouts into the software.
thanks for sharing this tutorial 🤗
Glad you found it helpful! 😄
well done!!.. lets all sign a petition to get the subscription price lower... $50/mnth.. tooooo much for single users. :)
Rive is actually FREE for single users :)
another banger! thank you! more long form rive tutorials please!!
✨👋💪🙂👍✨
fine tutorial, thx rahul
Looking forward to this!
Would you be open to doing a Construct 3 and GDevelop RIVE tutorial? Trying to get rive animations to play in my Construct 3 app. Unsure how to get it to work.
I've never worked with construct so no clue about the same.
@@thamotionmagic what about gDevelop, google's version of Construct 3 :D
sent you an email friend ;D keep up the good work!