https://pixelpoint.io/component---src-templates-blog-post-jsx-cont…p-overview-index-md-31f1cd2b97c94e48b3c6.js

1"use strict";(self.webpackChunkpixelpoint_website=self.webpackChunkpixelpoint_website||[]).push([[7830],{2140:function(e,t,a){a.r(t),a.d(t,{Head:function(){return w},default:function(){return v}});var n=a(8453),i=a(6540);function o(e){const t=Object.assign({p:"p",ul:"ul",li:"li",a:"a",blockquote:"blockquote",br:"br",h2:"h2",span:"span",h3:"h3",code:"code"},(0,n.RP)(),e.components),{Video:a}=t;return a||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Video",!0),i.createElement(i.Fragment,null,i.createElement(t.p,null,"Motion design industry has a lot of great tools, and it’s rather easy nowadays to create stunning visual effects and animations. Most of that technological progress was driven by the movie industry and the needs of video makers creating new blockbusters or TV shows."),"\n",i.createElement(t.p,null,"I’ve been working in the design space for over 10 years and I have switched to motion design about five years ago. At Pixel Point, I help to bring creative motion design into the projects, and I must say that building animations for web was not as simple as doing it for video production."),"\n",i.createElement(t.p,null,"When you think about motion design in web, there are several options you can go with:"),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"Use video"),"\n",i.createElement(t.li,null,"Develop fully native, manually created animations (e.g. framer-motion, threejs)"),"\n",i.createElement(t.li,null,"Use solutions like Lottie, ",i.createElement(t.a,{href:"https://rive.app/"},"Rive"),", or Spline"),"\n"),"\n",i.createElement(t.p,null,"In this article, we’re going to talk about ",i.createElement(t.a,{href:"https://rive.app/"},"Rive"),": why it is revolutionising the way motion design is done in the web, when you should use it, and how it performs in comparison with Lottie."),"\n",i.createElement(t.p,null,"I was using Lottie for many years, but one day, I got stuck with the performance issues of one specific animation. No matter how I tried to optimize it within Lottie framework, it simply did not work. That day, after some research, I discovered Rive. I reimplemented the animation in Rive, and I was shocked to see all the performance issues gone. No freezes or lags even on a low performing machine. This recent tweet from Rive’s founder is totally aligned with my experiments."),"\n",i.createElement(t.blockquote,{className:"twitter-tweet","data-dnt":"true"},i.createElement(t.p,{lang:"en",dir:"ltr"},"We recreated this Lottie animation in Rive.",i.createElement(t.br),i.createElement(t.br),"Lottie file is 181.7 KB.",i.createElement(t.br),"Rive file is 18 KB.",i.createElement(t.br),i.createElement(t.br),"Lottie GPU memory: ~149 MB-190 MB ",i.createElement(t.br),"Rive GPU memory: 2.6 MB",i.createElement(t.br),i.createElement(t.br),"Lottie JS heap: 16.9 MB",i.createElement(t.br),"Rive JS heap: 7.3 MB",i.createElement(t.br),i.createElement(t.br),"Lottie CPU: 91.8%",i.createElement(t.br),"Rive CPU: 31.8% ",i.createElement(t.a,{href:"https://t.co/y6TJkkeZSk"},"pic.twitter.com/y6TJkkeZSk")),"— Guido Rosso (@guidorosso) ",i.createElement(t.a,{href:"https://x.com/guidorosso/status/1580267624050532352"},"October 12, 2022")),"\n",i.createElement(t.h2,{id:"what-is-rive"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-rive"},i.createElement(t.span,{className:"icon icon-link"})),"What is Rive?"),"\n",i.createElement(t.p,null,"Rive is a modern tool for creating well-performing interactive animations that you can run anywhere. It is simple to use, works great with vector graphics, has a nice developer toolkit and many powerful features like state machine and mesh deformation. It’s a pretty new tool (at the time of publication, November 2022), and the available version is 0.8.9. However, even in that state, Rive outperforms some of its competitors and has a potential to soon become the industry standard for 2D animations."),"\n",i.createElement(t.h2,{id:"whats-great-in-rive"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#whats-great-in-rive"},i.createElement(t.span,{className:"icon icon-link"})),"What’s great in Rive?"),"\n",i.createElement(t.p,null,"Rive is great. My top features list is:"),"\n",i.createElement(t.h3,{id:"performance"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#performance"},i.createElement(t.span,{className:"icon icon-link"})),"Performance"),"\n",i.createElement(t.p,null,"The major advantage for me is performance (in the scope of web animations). It is achieved by better architecture and by Rive WAS

1M runtime library that handles all the calculations."),"\n",i.createElement(t.h3,{id:"size"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#size"},i.createElement(t.span,{className:"icon icon-link"})),"Size"),"\n",i.createElement(t.p,null,"Animation size is also significantly lower compared to Lottie files. Most of the time, if you use only 2D objects, it will be about a couple of KB."),"\n",i.createElement(t.h3,{id:"state-machine"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#state-machine"},i.createElement(t.span,{className:"icon icon-link"})),"State machine"),"\n",i.createElement(t.p,null,"Rive makes animations interactive - you can control the state of animation from your code, loop it’s parts or define the transition from one state to another. This is not possible to do with Lottie. It allows the creation of complex animations that react to mouse hover, clicks, movement, or changing the state based on the input value."),"\n",i.createElement(a,{src:"https://pixel-point-website.s3.amazonaws.com/posts/2022-11-03-rive-app-overview/state-machine.mp4",width:"1280",height:"720",autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),"\n",i.createElement(t.h3,{id:"runs-anywhere"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#runs-anywhere"},i.createElement(t.span,{className:"icon icon-link"})),"Runs anywhere"),"\n",i.createElement(t.p,null,"Rive animation is easily exported and can b run on any platform - iOS, macOS, Android, Windows, Web."),"\n",i.createElement(t.h3,{id:"mesh-deformations"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#mesh-deformations"},i.createElement(t.span,{className:"icon icon-link"})),"Mesh deformations"),"\n",i.createElement(t.p,null,"It’s a way to apply natural deformations to an object by connecting multiple points together into a mesh for further chained manipulations."),"\n",i.createElement(t.p,null,"It’s not everything that Rive can, you can find better visualisation of everything that works perfectly at the moment on their ",i.createElement(t.a,{href:"https://rive.app/features"},"website"),"."),"\n",i.createElement(t.h2,{id:"whats-my-workflow-in-rive"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#whats-my-workflow-in-rive"},i.createElement(t.span,{className:"icon icon-link"})),"What’s my workflow in Rive?"),"\n",i.createElement(t.p,null,"Despite Rive advertising their Editor as a primary source for the creation of animations, I still find it less productive to use in comparison with Adobe After Effect. That’s why I prototype and design animations in AE at first, and in the late stages, when everything is approved, export it to Rive. The export process is quite simple, and you can use the bodymoving AE plugin to do it. It will require some additional bug fixes and tuning after the export, but it’s still worth it considering that I spend less time on the initial stage. However in case of some trivial animations I do it directly in Rive."),"\n",i.createElement(t.h2,{id:"what-are-the-limitations"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-are-the-limitations"},i.createElement(t.span,{className:"icon icon-link"})),"What are the limitations?"),"\n",i.createElement(t.p,null,"Rive is rapidly growing, its team introduces new feature quickly, so everything below is valid to the date of publication."),"\n",i.createElement(t.h3,{id:"blur-glow-shadows"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#blur-glow-shadows"},i.createElement(t.span,{className:"icon icon-link"})),"Blur, Glow, Shadows"),"\n",i.createElement(t.p,null,"If you prototyping some animation that has a lot of light effects, it can be hard to do it in Rive. There is no native support for effects like blur, glow, or shadows. If it’s used ocassionaly and in a certain condition, sometimes it’s possible to work it around by adding rasterised light or blue images to create a similar effect. But if it’s used quite a lot, you should better consider using Lottie or developing an animation natively with the help of frame-motion or threejs. As far as I know, Rive has some ideas on how to fix, and maybe soon we will see it."),"\n",i.createElement(t.h3,{id:"dotted-lines"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#dotted-lines"},i.createElement(t.span,{className:"icon icon-link"})),"Dotted lines"),"\n",i.createElement(t.p,null,"Another feature that you can often meet in some application mockups or diagrams that for the time being is missing in Rive."),"\n",i.createElement(t.h3,{id:"elements-alignment"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#elements-alignment"},i.createElement(t.span,{className:"icon icon-link"})),"Elements alignment"),"\n",i.createElement(t.p,null,"You can’t align elements center, left or right."),"\n",i.createElement(t.h3,{id:"moving-an-object-along-a-bézier-curve"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#moving-an-object-along-a-bézier-curve"},i.createElement(t.span,{className:"icon icon-link"})),"Moving an object along a bézier curve"),"\n",i.createElement(t.p,null,"For example, if you need to have a vagon going over the curved road or a rollercoaster that also has to slow down and speed up according to the laws of physics, it might be hard to do in Rive. You will need to manually add a lot of keyframes replicating that road, as well as defining the transition functions between them. Fortunately, you can do it in AE, export it to Rive and tweak it to a perfect state. It’s a high demand feature that pops up quite often."),"\n",i.createElement(t.p,null,"In After Effect we just have to points and a curve and can make object move between them."),"\n",i.createElement(a,{src:"https://pixel-point-website.s3.amazonaws.com/posts/2022-11-03-rive-app-overview/bezier-after.mp4",width:"1280",height:"720",autoPlay:!0,muted:!0,loop:!0,playsInl

1ine:!0}),"\n",i.createElement(t.p,null,"In Rive to achieve similar effect we need to create more points. The more keyframes we create, the smoother the movement will be."),"\n",i.createElement(a,{src:"https://pixel-point-website.s3.amazonaws.com/posts/2022-11-03-rive-app-overview/bezier-rive.mp4",width:"1280",height:"720",autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),"\n",i.createElement(t.h3,{id:"mask-on-a-stroke"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#mask-on-a-stroke"},i.createElement(t.span,{className:"icon icon-link"})),"Mask on a stroke"),"\n",i.createElement(t.p,null,"Currently, you can use only a fill mask, but sometimes it’s useful to have the mask on a stroke. Since we talk about mask here, let’s also add that you can’t invert or subtract it."),"\n",i.createElement(t.h3,{id:"disable-files-for-exporting"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#disable-files-for-exporting"},i.createElement(t.span,{className:"icon icon-link"})),"Disable files for exporting"),"\n",i.createElement(t.p,null,"I often use png layer export from some design tools to match an animation key frame made in Rive with the reference. But once you add it to the artboard, you need to make sure that before the export you will remove that layer from the board, otherwise it will drastically increase the ",i.createElement(t.code,null,".riv")," file size."),"\n",i.createElement(t.h3,{id:"animation--design-tabs-splitting"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#animation--design-tabs-splitting"},i.createElement(t.span,{className:"icon icon-link"})),"Animation / Design tabs splitting"),"\n",i.createElement(t.p,null,"I often have cases when I need to change the object size without animating it, but the problem is that the object is only visible at a specific time of the animation. So you have to scroll the timeline to a specific point in time, then change sizes there, but in that case new keyframe will be created, so you have to remove the keyframe in Animation, then move to Design tab and insert the copied element size there. When you have to change those things on a curve with many points, it becomes quite annoying."),"\n",i.createElement(t.h3,{id:"changes-of-canvas-size"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#changes-of-canvas-size"},i.createElement(t.span,{className:"icon icon-link"})),"Changes of canvas size"),"\n",i.createElement(t.p,null,"You can’t change the size of the canvas by just pulling the edge while keeping all the objects at the same place and you can't extend the canvas from a specific side."),"\n",i.createElement(a,{src:"https://pixel-point-website.s3.amazonaws.com/posts/2022-11-03-rive-app-overview/canvas-resize.mp4",width:"1280",height:"720",autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),"\n",i.createElement(t.h3,{id:"native-app"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#native-app"},i.createElement(t.span,{className:"icon icon-link"})),"Native app"),"\n",i.createElement(t.p,null,"Having a web app in browser is good, but it would be great to have a native OS implementation."),"\n",i.createElement(t.h3,{id:"slow-zoom"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#slow-zoom"},i.createElement(t.span,{className:"icon icon-link"})),"Slow zoom"),"\n",i.createElement(t.p,null,"Zoom in the editor feels very slow, so you have to really scroll the wheel a lot to zoom in."),"\n",i.createElement(t.h2,{id:"summary"},i.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#summary"},i.createElement(t.span,{className:"icon icon-link"})),"Summary"),"\n",i.createElement(t.p,null,"Rive is an amazing and promising tool that already can cover plenty of motion design tasks. However, it has certain limitations, and knowing them can help you decide whether you should go with Rive or try the alternatives."),"\n",i.createElement(t.ul,null,"\n",i.createElement(t.li,null,"If you have extensive light effects, blur, shadow, and dotted lines effects in the animation, maybe you should consider using Lottie instead, or go with a native implementation."),"\n",i.createElement(t.li,null,"If you have a lot of moving objects on the page, be careful. Performance is great but it has some limits anyway."),"\n",i.createElement(t.li,null,"If you need elements that keep some physical properties, accelerating and slowing down correctly based on the weight of the object, AE will be a better choice for the development with a potential to be exported to Rive if necessary."),"\n"),"\n",i.createElement(t.p,null,"Rive works great for everything else and can be used to create interactive web components, animating 2d characters, or making some mockup animations."))}

1var r=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.RP)(),e.components);return t?i.createElement(t,e,i.createElement(o,e)):o(e)};var s=a(2532),l=a(1021),c=a(545),m=a(9072),h=a(3669),d=a(9063),p=a(352),u=a(84);const f=e=>{let{data:{mdx:{author:t,frontmatter:a,fields:{slug:n}},allMdx:{nodes:o}},location:r,pageContext:{videoCovers:s},children:p}=e;return i.createElement(d.A,{headerTheme:"black",headerShowThemeButton:!0},i.createElement("article",{className:"safe-paddings pt-32 sm:pt-24"},i.createElement("div",{className:"container"},i.createElement("div",{className:"relative mx-auto max-w-[696px] xl:mx-0 xl:flex xl:max-w-none xl:justify-center xl:space-x-20 lg:space-x-8 md:block md:space-x-0"},i.createElement("div",{className:"xl:max-w-[696px] lg:max-w-[626px] md:max-w-none"},i.createElement(c.A,Object.assign({},a,{slug:n})),i.createElement(l.A,{content:p,videoCovers:s})),i.createElement(m.A,{author:t,readMorePosts:o,socialShareUrl:r.href})))),i.createElement(h.A,{withTopMargin:!0}))};function v(e){return i.createElement(f,e,i.createElement(r,e))}const w=e=>{let{data:{mdx:{frontmatter:{title:t,summary:a,ogImage:n}}}}=e;const o=(0,s.d)(n);return i.createElement(p.A,u.A.blogPost({title:t,description:a,ogImage:o}))}}}]);
2//# sourceMappingURL=component---src-templates-blog-post-jsx-content-file-path-content-posts-2022-11-03-rive-app-overview-index-md-31f1cd2b97c94e48b3c6.js.map