Animations - build with React Spring

Setting up and using State & Element Animations

When using animations for the first time in your component, you can choose either "Animate State" or "Animate Element". Once you choose, the other option will be removed from the features list as the two can not be combined in the same component.

Animate State

How-to animate with transitions between states / variants from Figma. It's also covered in the video tutorial on YouTube.

This animation type is similar to Smart Animate in Figma. However, Quest does not honor the Prototyping features in Figma and any interactions between states must be set up in Quest using the "Animate State" feature. This is because Figma's prototyping features do not directly translate to how it works in production. However, you'll likely find that Quest is able to animate between states better than Figma as we honor more differences between states than they do. For example, you have the ability to change things like text size and letter spacing where Figma will only change opacity between those states.

Unlike Figma's prototyping setup, the way to create these state transitions for Quest is to create variants in Figma only. Once you import the component with variants in Quest, then choose the Animate State option from the features drop-down. From here, you can choose the trigger for the animation, the state (variant) you want to animate to, and the timing of the animation.

Example of a card animation with 2 keyframes set as 2 variants

In the Card example above, there are 2 different variants to animate between. Once this component is brought into Quest, you choose the State Animation with a While Hover trigger to achieve the result in the video below.

State Animations don't need to only take place between 2 states. You can set up a slideshow with breadcrumbs at the bottom to move the transition to the correct position if you'd like as the animation always moves from the current state to the state you're defining with the trigger.

Animation Timing:

Duration

The first option for timing is the duration for how long it takes to start and end the animation.

Delay

The second option for timing is the delay and will be the amount of pause before an animation is triggered.

Ease

The last option for timing is the ease type. This is the animation curve that affects how smooth the animation will be. If you choose "linear" for instance, you'll see it has no ease and moves at the same speed from start to end. You can play with "ease in", "ease out" and "ease in and out" to see how start and end speeds are affected.

Your results may vary when trying different variants. For instance switching text alignment or fixed width to fill containre will not be honered as an animation.

Animate State feature is only available if using Variants as States. Variants as Breakpoints will not allow you to use Animate State but will allow you to use Aniamte Elements. You can of course create nested components using the Animate State feature in a parent using Breakpoints.

Animate Element

How-to animate individual layers and layer groups

When using animations for the first time in your component, you can choose either "Animate State" or "Animate Element". Once you choose, the other option will be removed from the features list as the two can not be combined in the same component. Exit with

Choosing the Animate Element feature will allow you to set up animations on a single layer or multiple layers in a group. This doesn't require you to use variants in Figma but can easily animate things on the page based on several factors. For example, you can slide some text when the component loads or setup a button to scale up and down as you hover over it.

To start, pick a layer from the left-side panel that you want to animate and pick "Aniamte Element" from the Features drop-down list. The first thing you'll do is choose how to trigger the animation. Depending on which choices you pick, there will be different defaults. These defaults help you get started with animations quickly with relvant settings based on what you may be looking to achieve. However, you can freely use the drop-down list to quickly pick other defaults that might suite your style or simply type in any specific value you need.

Animation Triggers:

Click/Tap

This trigger will only work when a user interacts directly with it. It will trigger immediately and not after release. Animations will move TO the set values.

Click/Tap will allow you to set the trigger as the target layer or you can choose another layer in your project to animate instead.

While Hovering

This trigger will happen only while the mouse is hovering on the element. Animations will move TO the set values. Triggering this will play the animation but immediately play it in reverse when the mouse leaves the trigger. This does not work on mobile devices.

While Hovering will allow you to set the trigger as the target layer or you can choose another layer in your project to animate instead.

On Appear

This trigger will happen the moment the component is mounted and visible in your browser. Unlike Click/Tap and While Hovering, this will play the animation FROM the settings that are set. For example, if you have a Fade animation set to 0 on a layer with 100% opacity in your design using an On Appear animation, the animation will start from 0 opacity and fade into 100%.

On Appear will not let you set other layers as the target. You can only animate the layer you've chosen to add the feature to.

Animation Types:

Fade

This will simply change opacity of the layer.

Slide

This will move the layer in a direction. You have the option to do this with or without a fade to 0% opacity.

Rotate

This will rotate the layer in a direction. You have the option to do this with or without a fade to 0% opacity. You can also choose to rotate clockwise or counterclockwise.

Slide & Scale

This is a combination of both slide and scale animation types. You have the option to do this with or without a fade to 0% opacity.

Animation Timing:

Duration

The first option for timing is the duration for how long it takes to start and end the animation.

Delay

The second option for timing is the delay and will be the amount of pause before an animation is triggered.

Ease

The last option for timing is the ease type. This is the animation curve that affects how smooth the animation will be. If you choose "linear" for instance, you'll see it has no ease and moves at the same speed from start to end. You can play with "ease in", "ease out" and "ease in and out" to see how start and end speeds are affected.

Adding "Animate Element" to a layer can only be done once per animation. You cannot animate the same element from other triggers if it already has an animation applied to it. You can stack multiple animation on the same layer as long as you're chaining the target each time. One easy way to animate the same thing in different ways is to animate the layer first, then animate a parent container separately.