Home Page
capture of the tool interface showing the editor and preview sections
ReactTailwindZustand

Scroll Driven Animations Generator

A visual tool to create scroll-driven CSS animations quickly and without JavaScript.

Overview

Scroll Driven Animations Generator is a developer tool that allows you to create scroll-based animations visually and export clean CSS ready to use in any project.
The goal of the tool is simple: reduce the friction of working with scroll-driven animations and make them accessible to any front-end developer through an intuitive interface and real-time preview.

You insert your HTML layout, configure animations using visual controls, and copy the generated CSS. No complex setup, no JavaScript required.

Project Story

This project was born during my participation in JSConf Spain 2026 (March 14), where I joined a hackathon with the challenge of building a product during the conference using v0.app by Vercel.

The result was a prototype of Scroll Driven Animations Generator, which ended up winning second place in the hackathon.

The idea came from my experimentation over the past year with scroll-driven animations a modern CSS feature introduced in Chrome 115 that allows developers to create scroll-based animations without JavaScript.
With current browser support reaching around 82%, it felt like the perfect timing to build a tool that could simplify adoption and help developers start using this feature in real projects.

Personal Challenge

One of the main personal challenges was building the first version using a vibe-coding approach. Around 90% of the initial version was generated with AI assistance, but with a structured workflow that involved: planning the architecture, iterating in small steps, reviewing generated code, and continuously refining the output through feedback.

I enjoy reviewing and adjusting AI-generated code, and this approach allowed me to quickly reach a solid first version that was competitive in the hackathon.

From Prototype to Real Tool

A few weeks after the conference, I received the news that the project had placed second.

That recognition motivated me to continue working on it and transform the prototype into a practical tool that any front-end developer could use in real workflows.

The focus shifted from “hackathon demo” to developer utility, improving usability, presets, and overall experience.

How It Works

The workflow is straightforward:

  1. Insert your HTML layout
  2. Select elements to animate
  3. Configure scroll-driven animations using visual controls
  4. Preview changes in real time
  5. Copy the generated CSS

The preview runs inside an isolated iframe, ensuring that styles and animations do not interfere with the editor itself and providing a clean simulation of real-world behavior.

Tech Stack

The architecture is intentionally simple: the main application handles controls and state, while the preview environment renders the layout and animations in isolation.

React, TypeScript, and Tailwind CSS were used for the main application, while the preview relies on vanilla JavaScript and CSS to ensure compatibility and performance. Zustand is used for state management, providing a simple and efficient way to manage the application’s state across components.

Conclusion

Scroll Driven Animations Generator started as a hackathon project and evolved into a practical developer tool. It represents a combination of modern CSS capabilities, AI-assisted development, and a strong focus on usability, turning a complex feature into something simple, visual, and accessible.

Reference: