A Behind-the-Scenes Look at the New Jitter Website

0
7


If Jitter isn’t on your radar yet, it’s a motion design tool for creative teams that makes creating animated content, from social media assets and ads to product animations and interface mockups, easy and fun.

Think of it as Figma meets After Effects: intuitive, collaborative, and built for designers who want to bring motion into their workflows without the steep learning curve of traditional tools.

Why We Redesigned Our Website

Our previous site had served us well, but it also remained mostly unchanged since we launched Jitter nearly two years ago. The old website focused heavily on the product’s features, but didn’t really communicate its value and use cases. In 2025, we decided it was time for a full refresh.

The main goal? Not just to highlight what Jitter does, but articulate why it changes the game for motion design.

We’ve had hundreds of conversations with creative professionals, from freelancers and brand designers to agencies and startups, and heard four key benefits mentioned consistently:

  1. Ease of use
  2. Creativity
  3. Speed
  4. Collaboration

These became the pillars of the new site experience.

We also wanted to make room for growth: a more cohesive brand, better storytelling, real-world customer examples, and educational content to help teams get the most out of Jitter.

Another major shift was in our audience. The first version of the website was speaking to every designer, highlighting simplicity and familiarity. But as the product evolved, it became clear that Jitter shines the most when used collaboratively across teams. The new website reflects that focus.

Shaping Our Positioning

We didn’t define our “how, what, and why” in isolation. Throughout 2024, we spoke to dozens of creative teams, studios, and design leaders, and listened closely.

We used this ongoing feedback to shape the way we talk about Jitter ourselves: which problems it solves, where it fits in the design workflow, and why teams love it. The new website is a direct result of that research.

At the same time, we didn’t want Jitter to feel too serious or corporate. Even though it’s built for teams, we aimed to keep the brand light, fun, and relatable. Motion design should be exciting, not intimidating, and we wanted that to come through in the way Jitter sounds and feels.

Designing With Jitter

We also walked the talk, using Jitter to design all animations and prototype every interaction across the new site.

From menu transitions to the way cards animate on scroll, all micro-interactions were designed in Jitter. It gave us speed, clarity, and a single source of truth, and eliminated a lot of the back-and-forth in the handoff process.

Our development partners at Antinomy Studio and Ingamana used Jitter too. They prototyped transitions and UI motion directly in the tool to validate ideas and communicate back to our team. It was great to see developers using motion as a shared language, not a handoff artifact.

Building Together with Antinomy Studio

The development of the new site was handled in collaboration with the talented team at Antinomy Studio.

The biggest technical challenge was the large horizontal scroll experience on the homepage. It needed to feel natural, responsive, and smooth across devices, and maintain high performance without compromising on the visuals.

The site was built using React and GSAP for complex, timeline-based animations and transitions.

“The large horizontal scroll was particularly complicated and required significant responsive changes. Instead of defining overly complex timelines where screen width values would change the logic of the animation in JavaScript, we used progress values as CSS variables. This allowed us to use calc() functions to translate and scale elements, while the GSAP timeline only updates values from 0 to 1. So easy to understand and maintain!

— Baptiste Briel, Antinomy

We’ve promoted the use of CSS as much as possible for high performances hover effects and transitions. We’ve even used the new linear() easing functions to bring a bouncy feeling to our CSS animations.

There’s a great tool created by Jake Archibald on generating spring-like CSS easing functions that you can paste as CSS variables. It’s so much fun to play with, and it’s also something that the Jitter team has implemented in their software, so it was super easy to review and tweak for both design and engineering teams.

Jitter animations were exported as Lottie files and integrated directly, making the experience dynamic and lightweight. It’s a modern stack that supports our need for speed and flexibility, both in the frontend and behind the scenes.

— Baptiste Briel, Antinomy

What We Learned

This redesign taught us a few valuable lessons:

  • Start with benefits, not features. Users don’t care what your product does until they understand how it can help them.
  • Design with your real audience in mind. Jitter for solo designers and Jitter for teams are two different stories. Clarifying our audience helped us craft a stronger, clearer narrative.
  • Prototyping with Jitter helped us move faster, iterate more confidently, and keep design and development in sync.

We’ve already seen an impact: a sharper brand perception, higher engagement and conversion across all pages, and a new wave of qualified inbound leads from the best brands in the world, including Microsoft, Dropbox, Anthropic, Lyft, Workday, United Airlines, and more. And this is just the beginning.

What’s Next?

We see our new website as a constantly evolving platform. In the coming months, we’ll be adding more:

  • Case studies and customer stories
  • Use case pages
  • Learning resources and motion design tutorials
  • Playful experiments and interactive demos

Our mission remains the same: to make motion design accessible, collaborative, and fun. Our website is now better equipped to carry that message forward.

Let us know what you think, and if there’s anything you’d love to see next.

Thanks for reading, and stay in motion 🚀

Give Jitter a Try

Get started with Jitter for free and explore 300+ free templates to jumpstart your next project. Once you’re ready to upgrade, get 25% off the first year of paid annual plans with JITTERCODROPS25.

Source link