Where is the option for font-variation animation in the Webflow typography panel?

In the Webflow typography panel, you will not find a specific option for font-variation animation. Webflow currently supports variable fonts, which are fonts that have built-in multiple variations within a single file. However, animating the variations of a variable font is not directly available in the typography panel.

To achieve font-variation animation in Webflow, you can use custom code or interactions. Here's a step-by-step guide on how to do it:

1. Select the element that contains the text you want to animate.
2. Go to the "Animations" tab on the right sidebar.
3. Click on the "+" icon to add a new animation.
4. Choose the trigger that will initiate the animation (e.g., page load, scroll into view, click).
5. Set the desired animation properties, such as duration, delay, and easing.
6. Scroll down to the "Advanced" section and click on the "Add an action" button.
7. Choose the "Run JavaScript" option.
8. In the JavaScript code field, write your custom code to manipulate the font variations.

• You can use CSS properties like font-variation-settings and @font-face to control the variations.
• For example, you could use the document.querySelector method to select the element and then modify its font variations using the style.setProperty method.

1. Save your changes and preview the animation to see the font variations in action.

By using this method, you can create custom font-variation animations in Webflow. Keep in mind that this requires some knowledge of JavaScript and CSS. Additionally, remember to test your animations on different browsers to ensure cross-browser compatibility.

Additional Questions:

1. How can I animate font variations in Webflow?
2. Is there a built-in option for font-variation animation in Webflow?
3. How can I use custom code to control font variations in Webflow?