9 Components for Creating Delightful Animations9 Components for Creating Delightful Animations
These components make it easier than ever to create animations and transitions in Framer.
January 24, 2020
The product design process is relatively consistent across teams these days. Most start with wireframes or by laying up basic screens in their design software of choice, then flesh it out a bit, review it internally, iterate based on feedback, and so on. However, there’s a crucial step before the user testing phase or before presenting work internally. You need to apply a final layer of polish to your work to take it from simple design files to a prototype that feels like the real thing.
Animations are one of the best ways to do this. They’re such a vital part of most product experiences, so why shouldn’t they be considered in the design process?
Also, putting in time to nail down animations during the design stage will help close the gap between design and development. When designers lay out the way they see things animating and transitioning, they’re more likely to be on the same page with developers. That means that the end product should be closer to how they envisioned it.
This blog post highlights some great Framer packages for injecting animation into your work. Even better, most of these package components don’t require you to dive into code to make them work.
Switch is a component created by Framer’s own Tisho Georgiev. Use it to set up transitions between states or transitions triggered by separate interactions taken within your prototype. Switch can be used to animate a variety of components, such as bottom sheets, tabs, tooltips, charts, maps, and more. Download the example files to explore some of the use cases or watch Peri and Aroa’s video to learn how to create more complex animations using Switch.
Lottie is an iOS, Android, and React Native library made by the team at Airbnb. Lottie renders After Effects animations in real-time, which means animations can be integrated as easily as static images. The Lottie package brings the power of this library into Framer.
Perspective hover is a package by Chas Turansky based on react-tilt that lets you add hover interactivity to any frame on your canvas. Connect this package to a component to give it a unique 3D effect on hover.
Slide to Reveal
Menus can be hard to design, especially for mobile products. Often they get hidden behind other elements, which makes it hard to visualize how they might behave once they’ve been built for real. The Slide to Reveal component lets you focus not only on how your component looks but also how it will behave as part of your wider design.
This component was created by Framer product designer Anne Lee. Anne harnessed the power of Framer Motion, Framer’s built-in animation library, to make it possible for anyone to add a variety of animations to text. Download this package and try out all the different animation options available, including blur, rotate, and glitch.
Packages for SVG Animations
Here are three component examples that are great for creating SVG animations in Framer—Morpher, Animator, and Motion Path. These three offer everything you need to add animations to any graphics you create without touching code.
Morpher allows you to seamlessly transition between two or more SVGs. There are a whole lot of options here for customization. Adjust delays, loops, duration, pauses between morphs, and more.
Connect Animator to any graphic element in your project with an SVG path and it will automatically animate to its length. There are a bunch of animations controls to play with too, including fill, duration, and direction.
Motion Path is pretty different to Morpher and Animator. Instead of animating SVGs themselves, Motion Path enables you to animate any frame along the SVG path of a separate graphic element. Just connect this component to a frame as well as an SVG and watch it automatically animate in preview mode.
Many of the packages listed above use Framer’s property controls to allow you to visually change the behavior of animations. Animation Controls is a simple helper component created by Framer design lead Benjamin den Boer which exposes all of Framer’s animation properties so you can easily explore all of the possibilities.
Framer offers much more in terms of animation than just the packages outlined above. Most notably, Framer Motion, a production-ready React animation library built directly into Framer. Motion makes it easy to create something truly interactive by supplementing your designs with a few lines of simple code. Check out these examples to see how you could use Motion in your work. If you’re interested in learning more, read this blog post on how to create advanced code-based interactions in Framer.
Plus, check out these other incredible components:
Want more design articles?
Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.