.avif)
There’s something magical about motion on the web.
A well crafted animation doesn’t just “look good”, it adds depth, tells a story, and makes your brand feel alive. But behind every delightful scroll or interactive hover lies a important decision: what tools are we using to build it?
This is the story of how we at Pixeto evolved our animation tech stack over time and why we believe choosing the right platform isn’t just a tech decision — it’s a brand one.
Why Picking the Right Animation Platform Matters
Animations can do a lot. They can help onboard users, explain complex ideas, or even just make a SaaS website feel 10x more premium.
But here’s the catchm, not every platform suits every need.
Some are great for subtle micro-interactions. Others are better for cinematic homepage intros. The right choice comes down to three things:
- Who’s building it — designer or developer?
- Where is it being used — homepage hero vs inside a product tour?
- How heavy is it — because…
File Size is Always the Enemy
One of the biggest killers of web performance? Bloated animations.
We've had clients fall in love with a video background or 3D walkthrough — only to see bounce rates spike because the page took 6+ seconds to load.
Even the coolest animation isn’t worth it if it slows the site down. So every animation choice needs to answer this:
“Is it worth the kilobytes?”
Which brings me to…
Animation = Risk. But Also Huge Reward.
Every animation adds some weight to the page. Whether it's a few kilobytes of Lottie JSON or a megabyte-heavy video file, you're making a tradeoff.
But here's the thing, if it helps:
- communicate faster,
- make users stay longer,
- increase conversion…
…it’s probably a risk worth taking.
The key is to evaluate the ROI of animation:
- For marketing sites: Does it build trust or showcase product capabilities?
- For SaaS onboarding: Does it reduce confusion or guide user actions?
Animation should always have a purpose. And when it does, the reward outweighs the load.
Timeline: How Our Animation Stack Evolved
Let’s rewind a bit. Here's how our stack changed over the years — what worked, what didn’t, and what we're using today.
Phase 1: CSS Animations + Embedded Videos
Tools: CSS keyframes, YouTube/Vimeo/MP4 embeds
Use case: Basic fades, sliders, autoplay backgrounds
Why we used it: Easy to implement, minimal tooling
Downsides:
- Poor performance on mobile
- Videos = huge file sizes
- CSS animations lacked real expression
Phase 2: Enter Lottie — A Game Changer
Tools: Lottie + After Effects + Bodymovin
Use case: Lightweight, vector-based animations for UI/UX
Why we loved it:
- Super small file sizes
- Designers could animate without devs
Downsides: - Timeline control is limited
- Not great for complex interactions
Phase 3: GSAP + Three.js = Motion on Steroids
Tools: GSAP, ScrollTrigger, Three.js
Use case: Advanced scroll animations, 3D, timeline synced storytelling
Why we used it:
- Pixel-level control
- Unreal creative possibilities
Downsides: - Dev-heavy. Requires time + code finesse
- Not the most scalable for every use case
Phase 4: Rive,Our New Favorite Toy
Tools: Rive.app
Use case: Real-time, interactive animations made by designers
Why we love it:
- Designers control interactivity and state machines
- Lightweight, smooth, and powerful
- No dev bottlenecks for most animations
Downsides: Honestly? None for now. The platform keeps getting better.
Our Current Animation Stack
Right now, our toolbox includes:
- Rive → Designer led interactivity
- Lottie → For quick, lightweight loops
- GSAP + Three.js → High impact dev led experiences
- CSS → Subtle transitions and micro UX moments
- Videos → For complex story telling or background loops (used sparingly)
This stack gives us flexibility to show anything and everything on the web. From SaaS dashboards with live interactivity to emotional brand intros that feel cinematic.
Final Thoughts
Animation is no longer optional for modern brands. But blindly adding it is just as dangerous.
What worked for us is this:
- Let designers lead where possible (Rive, Lottie)
- Let devs handle complexity (GSAP, Three.js)
- Always weigh performance vs payoff
The web is a canvas. And now, more than ever, we’ve got the right brushes.