Video details

Will Johnson - React Animation Made Easy - React Miami 2022

React
06.06.2022
English

Will Johnson - React Animation Made Easy
Have you hesitated to add animations to React apps because of complexity? Tired of trying to figure out the perfect keyframes, easing, and timing? You can use Framer Motion to add smooth and performant animations with simple and declarative syntax all without being an animation expert. After this talk, you will have the superpower to bring your static sites to life.
www.jsworldconference.com
#reactmiami #jsworld #jsworldconference #frontendlove #frontenddeveloperlove #javascript #reactjs #angular #react #vuejs #vue #vue3 #typescript #graphql #jamstack #amsterdam #conference #svelte #sveltejs #next #nextjs #staticsite #css #html #nuxt

Transcript

What's up, everybody? How's everybody doing today? Good. Did I get it wrong? I am not nervous at all. I cut off. Ashley, welcome to my talk React Animation Made Easy introduce myself. My name is Will. I'm a developer advocate at Off Zero. I'm also an egg hand instructor, a technical writer, and the champion of community. I'm a whole lot of other things, but those are the things that I do in the realm of our tech community here. So I want to start this talk talking about basketball. Basketball. It used to be played like this. Okay, that's not working. Hold on. Okay. The best part is to be played like this. Now, the outcome of the game back then is the same as the outcome it is today. The ball went in the hoop. People score points. The team with the most points won the game. People went on to win championships, fans, cheer, everyone was happy. Now, basketball is played like this. Now it's faster, it's more of tempo, and it's a lot more exciting for the fans that are watching the game. Because the way that it was played the old way, people thought that that was the game of basketball. In the early eighty s, a small group of players and coaches wanted to introduce a faster, more uptempo, more exciting way to play the game. A lot of the Vertebrae players wasn't happy with that. They didn't want to change the way that they played the game. They have spent years perfecting their craft, becoming the best at what they do, and they didn't want to make changes because what they were doing was working for them. A real broke, don't fix it type of mentality. One thing that I think that wasn't considered was the fans. How did the fans feel? Fans watch basketball for entertainment. So what if they had a long day at work dealing with traffic, cooking dinner, then they sat down to watch the game. Wouldn't it be great to give them a thrilling experience, an exciting experience? One that makes them feel better, one that lifts their moods, one that makes them jump out of their seat. Now, I'm sure that any basketball player would agree that that's a great goal to have. But change is hard. Sometimes. When you need to make a change, you need something that makes that change easier. Something that takes care of the hard parts of creating a new habit to be able to replace it, or I'm sorry, the hard parts of making a new habit and replace it with the ones from the old habit. So for the NBA, that was Magic Johnson. He introduced a fast paced, high intensity style of play that they call Showtime. Back then, his teammates only had to change a few things to be able to play this new style of play. It wasn't a complete paradigm shift. They still had to do the same things of putting the ball in the hoop. But Magic Johnson made it easier because he had the flashy passes. He ran up and down the court a lot faster. He made it easier for his teammates to get better. 95% of websites today feel like 1960s basketball. They're stiff, they're static, not a lot of motion or emotion. Now, don't get me wrong. I'm not saying that websites today are bad or that they're wrong or that they're broken. They do exactly what our users need them to do. They hold data, they adjust the different screen sizes, and users are able to use them just fine. But I feel like something is missing. Animation, a lot of times gets discarded as something that's decorative or flashy or only should be used on certain types of websites. But that's not the case at all. Animation can improve the user experience without being flashy. Every decision that your user makes uses cognitive resources. According to Kathy Sierra, cognitive resources are finite. So every time a user has to make a connection that is using valuable resources, when they hover on part of your application and they wonder, can I click on this? That uses a little bit of brain power. When a user clicks a drop down menu and the options just pop onto the screen, your brain in the background makes those connections of the motion that's missing when that action actually takes place. This may sound like small inconveniences or nothing to really take serious, but think about your users when they've making decisions at work all day. They've cooked dinner, they have bad time with the kids, their brain is fried, and then they come to use your website either to entertain themselves, do something fun, or to do something important like pay bills. They have a bad experience and they can't even tell you why. That's because their cognitive resources are depleted and it makes it harder to navigate. A few animations added to your site could save those pressures resources and improve their experience. Animations can also add context. For example, having a password field shake when the user enters the wrong password, or having a button hover or glow or whatever. Not like pulsate or glow whenever someone hovers on it, so they know that this is the next thing you want them to do and how to continue on their journey. But animation is hard. You're already managing state building UIs, digging through bottomless docs, sometimes deciphering cryptic error messages, then taking the time to learn all the animation concepts like easing damping, keyframes stiffness and more, just to make a hover animation on a button. It doesn't seem like a good use of time. And because of that, animations get thrown to the back burner because they don't seem important and because websites still work. So in order to improve that experience for our users, which is the reasons why we're building applications, there needs to be something that can ease the transition to make more interactive applications without developers having to completely change how they develop apps. Developers need a Magic Johnson framermotion is magic Johnson framermotion is a declarative animation library built for react applications. I like it because it has simple syntax using react concepts that you're already familiar with and that you write every day. It also has default animations in place. So you don't have to worry about getting every single little detail of an animation perfect. All you have to do is tell frame Remotion what you want the animation to look like and frame Remotion will handle the rest. So next I'm going to show some small snippets of code and kind of go over some of the ways that frame Remotion makes all of this a whole lot easier. So once in frame Remotion is downloaded and installed, you import into your application. The first thing you want to do is create a motion component. To create a motion component, you take any HTML element or SVG tag and add motion dot to the front of it on the opening and closing tag. Once you have a motion component, you have access to all of the props that frame Remotion gives you. So the first, most important prop is the animate prop. The animate prop tells your application or tail frame of motion how you want the animation to end up. So the final state of the animation. So in this example, I create the animate prop. I pass an object with the property that is what I want to animate. So this is scale. This will change the size and then the value is two. So I pass in that object with a scale of two. And when the application loads, this element will animate to twice its size. Now, keep in mind, would you want you to pay attention here? All that you had to do was write scale two. You don't have to say how long it's going to take you to have to say what type of animation you're using. You don't have to do any of that. To make the animation look good. You put in animate scale two. Frame of Motion does it for you. It'll look good and you have to worry about any of those details. So you have what the animation wants to look like at the end. You can use the initial prop to talk about how you want it to look at the beginning. So with the initial prop, this is the prop that tells you how you want the animation to start, what state you want it to be in when your application loads. So here I have an object passed into initial as scale or the application first loads. It will be zero. So more than likely it'll be invisible. And then when it animates and loads, it'll be a scale of twice the size. Now, Frame of motion will handle the in between the initial and the anime. You just tell frame Remotion where you want it to start and where you want it to end. The details are handled by frame Remotion. But once you start animating more things and wanting to dive deeper into different things that you can customize animations, you're probably going to want to customize how it moves in between initial and animate. In order to do that, you use the transition prop. So the transition prop allows you to change the timing, allows you to change the type of animation, change the speed, all type of things that you can really dive deep into to customize your animation. But that's what the transition prop allows you to do. For this transition prop, I set the duration to zero. Now you have initial, you have anime, you have transition. As you see, we're starting to add a lot of props. If you like dive even deeper into animations and customizing, you can start to see that okay, maybe this component is getting like really large. So in order to handle that, frame of motion has variants. So variants are objects that you can use to create animations. So if you look at the top, you can see the div variant, the property hidden and the opacity of that is zero. The visible property is one or the opacity of that is one. So whenever I name something hidden, it will animate to that property and invisible the same way. So when I can go down to my component, I have the variance prop and I added div or I passed it div variance. So now it knows what variant I'm referring to. And also you can name variants whatever you want. You don't have to put variant in the title. I usually don't, so I did that for the example. But you can name them whatever you want. And then when I wanted to say the initial and the animate state of the animation, I named it Hidden and I named it visible. And animation can get really complex. You can change size, you can rotate them, you can add hover animations, you can change the transition. There's a lot that you can do. These variants can get very big and the only thing you can do to reference them is use hidden or visible or whatever names you give them. Also it makes it good when you're working on a team and everyone's not really into animation, you can just say hey, set it to hidden or set it to visible. They may not know all the stuff you did to make that happen, but they probably know what Hidden or Visible means or whatever other name you may give. Another thing is gestures. Motion opponents have access to event listeners outside of the normal ones that you get with react framework. Motion can recognize hovers taps, which is button presses or just presses on the element in general. It can recognize pens, it can recognize drags. And when you insert and exit the viewpoint, you don't have to use the react intersection observer or anything like that, you can just use a prop for it. That's like really cool to me. And in this example, we have while hover. So while I'm hovering on the element, I want it to scale 1.2 times its size and then while tap so when I'm pressing on it, I want it to shrink about one or 0.9 times the size. And again, just like with the anime and initial prop, frame of Motion handles how these look. That is not something you have to worry about. You just tell Frame of Motion what you want it to do. Probably my favorite part of Frame Remotion. I mean, I have a lot of favorite parts, but this is one of them that's really good. It's animate presence. Animate presence allows you to animate elements while they leave the Dom or the react tree. So if you have a list of items, some emails, whatever, and you want to remove them, when you click that, it will actually do the animation for you. Because normally that's not something that's like built into a react that has a lifecycle method that tells you when it's leaving the Dom or the react tree. So, Frame of Motion has this built in so you're able to create those type of actions. So in order to use Animated Presence, you wrap the element that you want to animate that's leaving the Dom with the animated presence. Then you have to make sure that it has an exit prop. So any children of the animated presence component that has an exit prop, then you pass it in the object that you want to animate. So this opacity is zero. So when this element is removed, it will be invisible because the opacity is zero. And that's all you need to type to be able to get an entire element removed from the react tree and animate it. And you can also do what it's called like layout animation. So if it's in a list, you can remove that and then Frame Emotion will automatically remove any other items in that list. So you might be asking what can Frame remotely do that pure CSS can? That's a great question. And the creator of Frame Promotion answered that question on Twitter. So we can do layout animation springs, it can make elements draggable. You can easily create staggered animations. You can do individual transforms exit animations. You can link values using the Use transform hook. Press and hover combinations are handled properly. CSS style transforms origin for SVGs. You can really easily draw SVG paths and you can animate CSS bars across browsers. So a lot of benefits that you get from using Frame Remotion over just regular CSS or regular CSS. So if you want to learn more about Frame Promotion, I do have a course on Ed Kay called Anime React Apps. With Frame Remotion, I go into all these features and I go to a lot more as well. And I think that frame of motion is a great way to add motion and interactivity to your applications and improve your users experience without you yourself being an animation expert. The creator of the library, Matt Perry, has done a great job handling the intricacies and ins and outs, combining all the proper animation principles that we've learned over time so you can continue to make great applications for your users. Thank everybody for listening to my talk. If you have any questions, please talk to me. I love talking animation and you can follow me on Twitter at willjohn in IO. Enjoy Miami, people. Thank you so much.