Animate between Variants/States in React using Quest
You can finally not just convert your Figma design files and design systems into React but now you can also animate anything and everything in a unique way that will completely change your current workflow. Our goal was to make animations easy to do for anyone, but we didn’t just want to stop at simplicity because that can limit creativity and polish. So we decided to build a new way to animate for React: Animate States. Similar to animating in design tools such as Figma, XD and Framer, animating between states has always been a really “cool” way for designers to use prototyping tools to achieve complex animations but it’s never been practical. Unitl now…
Animate States
XD calls it “Auto-Animate”. Figma calls it “Smart Animate”. Simply create a component with more than one variant in Figma, bring it into Quest and we create a React component with multiple states. Then choose your trigger and timing and you can quickly animate between states.
See the example of a While Hover animation on a card setup (screenshot) and in action in the video below.
State Animations have the unique benefit of being extremely easy to setup and allow for animation multiple elements at once. In addition, this gives the power to animate hundreds of CSS properties that other animation engines cannot. Animate between margin widths, drop-shadow distance, corner-radius, text-size, letter-spacing… The possibilities are limitless and if you’ve ever tried Figma’s “Smart Animate”, Quest will general animate even more possibilities than Figma is able to in their prototyping mode. This state animation style is a first in any tool on the market because of how Quest handles React states and state triggers making this a huge leap forward in enabling truly custom experiences.
To connect the states and animate things in this unique way, we needed a good animation library. We choose React-Spring.
After researching several other React animation libraries, we decided React-Spring was the most robust solution with the best documentation and options. We’ve used Anime.js in the past for HTML pages but it didn’t seem a perfect fit for React. With React-Spring we were able to easily use translate to move things independently of their starting position without affecting entire layouts but also it worked great for state animations when we wanted animations to affect other elements on the page in a responsive way. We wanted to be able to have background images scale in or H1 text elements slide into place without shifting the hero section around. But we also wanted to be able to create things like FAQ sections with expandable containers that push the rest down the page. With React-Spring we discovered we were able to achieve both.
In the end, we couldn’t be more proud of how animations came together. While the approach does copy prototyping features of UX design tools, it also builds upon them in a slightly different approach to be usable in the real world. Use Animate States and you’ll be moving things around and previewing them in seconds. Making pixel-perfect interactive UI has never been this accessible & we can’t wait to see what you bring to life.
— — — — — —
In addition to State Animations, we also created Element Animations. These are quick ways to animate things such as fade, slide, scale or rotation and don’t require states to work. When you combine both scenarios, there’s no limit to what you can animate.
Read more about the both Animations feature in our docs.
— — — — — —
Quest is the future of frontend development. Build better. Build faster.
Convert Figma to React with the Quest plugin.
Check out how to get started.
