デバイスを縦にしてください。
当サイトは縦画面での閲覧を推奨しています。

Please rotate your device.
This site is best viewed in portrait mode.

Tonami Komuro - Web Creator Portfolio

portfolio tonami komuro

portfolio tonami komuro

project

[ information ]

Genre:
Creative Coding
Technologies:
JavaScript, GSAP

[ description ]

- English -

This is an animation expression using variable fonts with GSAP.

What I focused on was creating colorful afterimages by moving multiple texts to enhance visual impact. I also carefully adjusted the animation easing to achieve pleasant movement.

Although I only used basic animation techniques such as rotation, scaling, and duplicating elements in this work, I was reminded that by sticking to the basics and paying close attention to proper easing and the synchrony of movements, it’s possible to create memorable animations.

- Japanese -

バリアブルフォントを使ったGSAPでのアニメーション表現です。

意識した点としては、視覚的なインパクトを強めるために、複数のテキストを動かしてカラフルな残像を表現しました。また、アニメーションのイージングを細かく調整し、気持ちの良い動きになるよう心掛けました。

本作品では、回転やスケール、要素の複製などアニメーションの基本とされる手法だけしか使っていませんが、基本に忠実に、適切なイージングや動きの連動性にこだわるだけで、印象に残るアニメーションを作ることができるのだと改めて実感しました。

font in motion screenshot1
Font appears while rotating

[ images ]

  • font in motion screenshot2
    After rotation animation, pauses once
  • font in motion screenshot3
    Animation starts again
  • font in motion screenshot4
    Variable font weight increases and expands horizontally
  • font in motion screenshot5
    Changes to gold text (final form)
©2025 Created by Tonami Komuro