I’m wondering, whow can I do variable animation font same the attached video, and which technique can I use?
Depends on where you want to display the animation. On the web, you can animate variable fonts with CSS animations/transitions.
Checking out the source code of the page, it’s a Lottie animation. The SVG outline with the points & handles may have been generated with Presenter and then animated in After Effects to generate the Lottie JSON that comprises the animation.
I really love the new animations on the Glyphs site though
Samsa is able to do this. Drag your font onto the app, go to the glyph you want, then click Export MP4. You will get a load of PNGs in your Downloads folder*, plus a shell script which runs ffmpeg to generate an MP4. Let me know if you get it working! Tune the glyph style by editing the ‘light’ style (currently this means editing samsa-gui.html source).
* For some reason, only Firefox seems to generate these images correctly. Other browsers skip many images.