Tools and methods I use for interface animations, including Rive. Well also review an older project to highlight what to avoid and what worksbetter.PrinciplesWhen it comes to animations, they should be clear and unobtrusive, providing smooth transitions between object states without interfering with the main task. Animation primarily serves as a supplementary element of user interaction in an application orwebsite.Its also important to create a consistent structure of micro-interactions within the product to form users habits for reactions to actions with an object. The main principle: animations should be used wisely to support functionality, not hinderit.Choosing atoolAs a product designer, your choice might be quite limited, consisting of one or two tools for creating animations. Ive experimented with the most popular tools such as Protopie, After Effects, Rive, Principle, and I can say that they are all quite similar in functionality.FigmaOf course, you can create animations in Figma, but the animation functionality is quite limited. Personally, I find it faster, more enjoyable, and without functional limitations to do it somewhere else, likeRive.If you want to create something similar (as in the video below), I recommend using After Effects, as its convenient for working with PNG-sequences. However, for most product tasks where you need to show a flow or behavior of certain elements in a design system, you can limit yourself to familiar tools likeRive.https://medium.com/media/cad2bf07d9df2bea91bb78c6f8b201b9/hrefOverloaded elements in animationLets digress a bit. Ill give one example of my work, I think I did it in 2020. In retrospect, I consider it less successful because each block and even text has its own separate animation when appearing. This seems excessive. Everything is done in the spirit of movement for the sake of movement which is definitely not about achieving user goals or a pleasant everyday experience. At the very least, all these unnecessary movements can irritate theuser.https://medium.com/media/08e90a6608e76f8dea6d14f91b374627/hrefConcepts and referencesSometimes to come up with an interesting interaction for a concept, I look for references. It doesnt necessarily have to be an animation; it can be layouts or pictures. The main thing is to latch onto details and develop your own idea based on their story, especially if were talking about a concept. To search for references, I often useAre.nahttps://medium.com/media/875d5075912f60947ac7226f5df72d47/hrefAlternatively, you can take a problem or a standard action, like opening a menu, and make this action more interesting, simple, or even playful. The main thing is to have a user-friendly approach.RiveLets begin. I think if you already have experience in After Effects, understanding this tool will take a couple of hours. For a beginner, it will take a bit more time for experiments and studying the guide. Ill explain the basics briefly; for detailed logic, you can refer to the guide or check their YouTube channel, where they explain each button and internal features well. Ill just show the basics using a pre-created animation as anexample.Essentially, there are two modes here: Designfor creating and editing UI, and Animateobviously for creating animation . Inside the Animate tab, there are six columns, of which the main onesare:State machinethis is the area where you drag timelines and manage them as nodes. Here you set logic, buttons, actions, and other parameters.Timelinewhere you set keyframes and adjusteasing.I rarely use the state machine mode. However, there are cases when its useful to click through the interaction and discuss it with a developer/product managerin such cases, its good to have a prototype, which is what the state machine is for. Ill explain how I use this modelater.I created a concept animation to show my worflow inRive:https://medium.com/media/d031b040b327f848c5f483a8977dd2ec/hrefTransferring a layout from Figma toRive:Its simple. Select the frame, Edit Copy as Copy as SVG, then open Rive, Ctrl+V Go to the Assets tab and transfer our file to the layout. Easy, but theres one thing. I transfer the layout clean without images inside, just shapes. So prepare your frame consisting of shapes in advance. You can add imageslater.https://medium.com/media/37e77afa60da3b9abd217ecec88dd933/hrefWorking inRiveI created timelines for each button state: hover, default state, and transition. In general, the logic is this: each state corresponds to its own timeline.https://medium.com/media/856ecc49022de25e29ec76b4d3aee2dc/hrefFor each timeline, you can choose the playback mode or set a specific playback area by setting the Work Areamode.https://medium.com/media/cf7aa6354edde4621b95d15752ace53e/hrefI also created an icon animation on a separate artboard, where it has its own timeline and state machine. Then I add the resulting animation to the main artboard, to the button, using the Nested artboard tool.https://medium.com/media/da05a5b68802733eb30bad33601476e1/hrefI added a small glow on hover for the dark and light versions. For the system to recognize that it needs to produce movement for the layers, I attached a Transform element in the Constraints section to the blur layer, after creating a Targetshape.Then in the state machine, in the Listeners column, I created an action and selected the Pointer move modethis mode will react to mouse movement and start the animation (timeline).https://medium.com/media/f760326c80f0ed0002869f50db396c4b/hrefNext, the resulting timelines need to be connected in the State machine. For this, I create triggers, in the Inputs column there are 3types:Numberthis input contains an integer value and essentially stores numerical information.Booleanthis is a logical data type that takes one of two values: true or false. You can think of it as a switch that can be either on (true) or off(false).Triggerthis is an automatic mechanism that is triggered when certain conditions are met, like a start button that activates a predetermined function.https://medium.com/media/99e1897351d4cd36e8a86822b308c766/hrefI assign an action to each trigger. Actions are created in Listeners column and consist of threeparts:Targethere you need to select the area with which the user will interact, in my case it will be a heatbox (a regular shape with a slightly larger area than the buttonitself).In the second point, you need to choose how the interaction with the target will occur, for example: when clicking on the object, when hovering over the object, etc. This is what I mentioned earlier when I created the glow for the button, namely Pointermove.Select the trigger by which the action will be performed.Essentially, here you describe the logical state of the button and determine what exactly my animation should do when interacting with the trigger. For example: a click or mouse movement can start an animation or another specific function.https://medium.com/media/b0aa8aebfa3b5750ee3de6393c6d9d15/hrefThen I transfer the timelines to the controller and connect them as nodes. In the middle of each such connection, a transition key is created. By clicking on it, you can set your trigger for entering the animation in the Conditions tab. For example, if I hover over the button, the timeline will automatically move to the next timeline and soon.Each action, including exit, needs to be specified as a separate condition and the value switched to true/false (depending on the action). You can gradually check the results by playing the animation and fixingerrors.https://medium.com/media/10fe11ea439223aacffe038f3c7529d1/hrefThe final result after linking all timelines in the statemachine.https://medium.com/media/500dd931c34acd0d8221fe0f1de746d7/hrefTransferring animation to developersI usually export the animation as a Lottie file, which can be integrated into a website or application. If Im making an animation in After Effects, I use Bodymovin to create a JSON file based on the composition.I can also provide a video/gif with the animation, which will also be useful, for example for transition animation, object, etc. Separately, I can attach parameters and description:1. Trigger2. Duration 3. Interpolation (i.e.,easing).All this information and more can be found in your Rive sourcefiles.Easings, curvesAlways test animations with different curves and adjust them based on how they are perceived by users. I would recommend studying this article from Material Design. It explains the principles of working with curves excellently.https://medium.com/media/96e9b2a808d5ade56b9875d5b0b95a3f/hrefMy usualcaseAs I mentioned earlier, I use the state machine mode to click through the animation. However, for creating concepts for Twitter, and even regular transitions, I more often work in one timeline, which I then export tovideo.For example, I made the desktop version of the video chat on one timeline. Then, to add a mockup or just show the animation on a beautiful background, I created a separate layer and transferred the finished artboard with the animation to another frame. This way, I avoid accidental changes and dont spoil the already obtainedresult.https://medium.com/media/d13e3c3188342a96e186760e8c0e0a3f/hrefRecently, Ive been trying to make the interface simple and interactions simpler, while focusing more on what emotions certain interactions can evoke in the user. After all, its very cool, and it inspires trust when, for example, the bank transfer process from start to finish is accompanied by smooth animation, which allows the user to stay focused on the elements and doesnt throw them out of the flow. This creates a sense of care and friendliness.https://medium.com/media/0a4f264091c2426f99e04cca9ac1c171/hrefFor example, in this flow, I tried to create a scroll animation that reveals additional details about the NFT without distracting attention from the picture itself as the main element. Instead, the additional object smoothly appears when scrolling, keeping the focus on the main picture. Such smoothness of action helps to maintain the users attention.https://medium.com/media/b27f78b95340fc2b8a58616cd78aded5/hrefThe idea is this: to make a static screen with a QR-code more lively. With a slight tilt of the phone, the position of the QR-code changes, creating a live interaction for the user without an extra click:)ConclusionUltimately, incorporating non-functional elements can enhance user experience, like easter eggs, which can add excitement to using the app. These little things can turn routine actions into a game or give the user a sense of control. All this is important to consider when developing animations and interactions.https://medium.com/media/362faaddc225f41fd21a06ec10cfc3c2/hrefAnimation should help solve the task and support the users journey, bringing static and flat transitions to life with smooth animation. Its important to consider speed, timing, and other aspects so that micro-interactions, on the contrary, push the user to faster task completion from point A to point B, increasing their confidence in theaction. Follow me on my Twitter/X or Telegram channel, where I often post various interaction concepts.Figma + Rive: sharing my workflow for UI animations was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.