Building a Kirby‑Themed Animated Input Component with Vue 3 and GSAP

Introduction

The article explains how to implement a Kirby‑themed input box in a Vue 3 project, using GSAP (GreenSock Animation Platform) to drive various animation states based on regular‑expression validation of the entered email.

Effect Preview

An animated GIF shows the Kirby character reacting to valid and invalid input.

Technology Stack

Technology

Official Site

Vue 3

https://cn.vuejs.org/

GSAP

https://gsap.com/

Component Structure

The component consists of a <template> with SVG markup for Kirby, a <script> section that imports Vue refs, GSAP, and the MorphSVGPlugin, and scoped SCSS styles that define colors, fonts, and layout.

SVG Drawing

The Kirby appearance is defined directly in SVG; the paths for body, eyes, mouth, hat, and envelope are copied from the GSAP examples and adapted to Vue's ref system.

GSAP Integration

GSAP is registered with gsap.registerPlugin(MorphSVGPlugin) . Refs to SVG elements are created using ref() so that GSAP can animate them.

Animation Methods

Several timeline functions control the animation flow:

animateInhale() – shows the inhaling animation.

animatePuffed() – expands Kirby after inhaling.

animateSwallow() – plays the swallowing sequence.

animatePowerUp() – animates the envelope and hat rising.

animateReset() – returns all parts to their initial state.

animateStar() – handles the star‑spit effect.

animateSpit() – plays the spit‑out animation.

Component Initialization

In onMounted the SVG paths are converted to morphable shapes and initial transform origins are set for all parts.

Reactive Props and Watchers

The component receives two Boolean props, swallow and spit , which are watched to trigger the corresponding animation chains. When an animation finishes, an animationdone event is emitted to the parent.

Input View (KirbyView.vue)

The view component manages the email input, validates it with a regular expression, and updates reactive flags isValid and isNotValid . Valid input triggers the swallow animation, while invalid input triggers the spit animation.

Text entered by the user is displayed as animated letters that jiggle and then slide out of view using a GSAP timeline.

Styling

SCSS variables define the color palette and fonts. The input field uses a custom border animation, and the submit button contains an SVG star that changes color on hover.

Repository & Running

Source code is hosted at https://gitee.com/liu_soon/vue3.3 . After cloning, run npm install and npm run dev , then open http://localhost:5173/Kirby to see the demo.

Conclusion

The tutorial provides a practical example for learning GSAP animations within a Vue 3 application, delivering a visually appealing, interactive input component suitable for blogs or personal sites.