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.
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.
The first option for timing is the duration for how long it takes to start and end the animation.
The second option for timing is the delay and will be the amount of pause before an animation is triggered.
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.