8 JavaScript Checkboxes

This is a Popping Form Controls component. It replaces standard browser checkboxes and radio buttons with highly stylized, interactive versions. Its function is to provide delightful micro-interactions by triggering a localized, physics-based confetti burst whenever an input is successfully checked.

This Elastic SVG Morphing Form Controls set redefines standard UI elements by treating them as organic, malleable shapes. Instead of rigid CSS transitions, it utilizes GSAP’s MorphSVGPlugin to physically warp the vector paths of checkboxes, radio buttons, and switches during interaction. The result is a tactile, “gummy” feel where elements squish upon clicking and snap elastically into their active states.

A full-featured single-page application (SPA) with a responsive interface, filtering, and micro-interactions that runs fast and looks professional.

A tactile, visually rich option list where interaction is accompanied by smooth “drawing” animation, and group selection logic works intuitively.

This interactive checklist showcases a sophisticated “delete” micro-interaction, driven by a gsap.timeline that is triggered by a minimal JavaScript state machine. The timeline precisely choreographs a complex sequence of tweens, including a unique checkmark effect created with the DrawSVG plugin, to animate SVG <line> elements and the <label> into a fluid and satisfying animation.

Experience a detailed, multi-stage SVG animation where a box elegantly morphs into a checkmark. The effect is a choreographed sequence of CSS transitions on transform and stroke, combined with JavaScript-driven attribute changes, creating a polished and satisfying micro-interaction.

Explore the powerful tandem of GSAP and CSS Variables, where to/fromTo with keyframes control SVG elements inside Radio/Checkbox/Switch. The animations utilize the feColorMatrix filter (the “Gooey” effect) and SVG transforms to create smoothly “flowing” shapes and stylish toggles.

A demonstration of styling hidden input[type="checkbox"] functionality with modern CSS. It features four distinct, responsive styles, from minimalist SVG-drawing and pill toggles to complex pop and anime.js timeline animations.