This year, I’ve been drawing inspiration from all over — brand books, billboard design, motion graphics, Slack posts, and even early-access tools and features. Many of those references weren’t interactive or animated to begin with, which made them the perfect starting point for experimentation.
During a few late-night sessions, I used CodePen to turn those ideas into creative builds of my own. These projects became a fun break from client work, a space to play, and a great excuse to share more personal work online. Several were “Picked” by CodePen, one was featured in their newsletter, and one even led to a swag box from the GSAP team! 💚
If you’d like to see more, feel free to follow along on CodePen.
Exploring GSAP’s new easeReverse with a press-and-release yo-yo interaction. The drop uses a custom bounce ease, while the return uses easeReverse for a fast, direction-aware snap back to the start. Includes spin, sway, and a 3D flip info panel.
Learn more about easeReverse @ GSAP.com
An infinite smooth scrolling typography demo with repeated decorative text that scales based on its position in the viewport.
Built with:
Inspired by the Joby branding by TinyWins: https://tinywins.com/case/joby/
A grid of minimal geometric UI studies built with HTML, CSS, JS, and GSAP. Each panel explores a different motion behavior using rings, circles, and simple outlined shapes with restrained easing and staggered timing.
A layered 3D image stack inspired by animation onion skinning. Duplicate planes move through space toward the viewer while fading and filtering. All parameters are fully tweakable with Tweakpane.
Starts as normal wrapped text, then words spread across each line until they form a fully justified layout.
Built with vanilla JS + GSAP SplitText.
A looping 3D animation built with HTML, CSS, and vanilla JavaScript.
Warm ceramic discs and cool glass panels animate in a sine-wave motion with depth, rotation, and subtle inertia. Colors are driven by OKLCH for smooth perceptual blending, and the entire scene tilts based on pointer movement (mouse + touch supported).
Inspired by Ordinary Folk — Equilibrium: https://youtu.be/64BsL0SJhzo?si=XIx894aMb08AxvUY&t=35
Magnetic vertical lines rendered on a with a spring-based interaction system.
Lines are subtly pulled toward the cursor or touch position using a smooth falloff curve, creating a responsive magnetic field effect. Lines closest to the pointer can transition from dashed to solid and fade opacity based on proximity, enhancing depth and motion.
Includes a full Tweakpane control panel for live tuning of:
Built with vanilla JavaScript and optimized for high-DPI rendering.
Inspired by a Linear billboard mockup.
