Skip to main content

Variable font → mouse movement animation

Learn how to animate your variable font's weight and color using one simple parametric animation

I
Written by Inbal Shemesh
Updated over 3 months ago

Step-by-step setup

1. Create a parametric animation

  • Select the frame named text frame

  • In the Interact panel, add a new Parametric Animation

  • Choose the action: Horizontal Mouse Move


Interaction Settings

  • Trigger Event: Mouse Move X
    → Click Customize and turn ON Smooth Animation

  • Area of Action: text frame (the frame selected above)

  • Layer of Interaction: variable (the text layer)


Animation Properties

  • Choose: Fill, Font Weight

  • Keep only "Change to" selected

Set values:

  • Fill = #9F9FFF (purple)

  • Font Weight = 900

  • Duration = 4s

  • All other settings can remain default


Text and Animation Options

  • Enable Split Text

  • Choose: By letter

  • Set Interval = 0.2

Did this answer your question?