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.

avatar

Addison Schultz

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

Switch component available in Framer

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.

Check out the Switch package

Lottie

Lottie component available in Framer

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.

Check out the Lottie package

Perspective Hover

Perspective Hover component available in 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.

Check out the Perspective Hover package

Like what you’re reading?

Sign up to our email list to get the best of the Framer blog sent directly to your inbox.

Slide to Reveal

Slide to Reveal component available in Framer

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.

Check out the Slide to Reveal package

Animated Text

Animated Text component available in Framer

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.

Check out the Animated Text package

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

Morpher component available in Framer

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.

Check out the Morpher package

Animator

Animator component available in Framer

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.

Check out the Animator package

Motion Path

Motion Path component available in Framer

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.

Check out the Motion Path package

Animation Controls

Animation Controls component available in Framer

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.

Check out the Animation Controls package


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:

Like this article? Spread the word.

Sign up for our newsletter

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.