v0.01 — stardate

The quest for the perfect motion tool

At Pixelpillow we find that motion is an integral part of creating modern web experiences. Problem though, is that - while there are many tools available - most of them lack important features we need for a seamless transitions from design (Figma in our case), to motion design, to development.

We have our fair share of experience with motion tools and tinkered with al lot of em (Flash ✝︎, After Effects, CSS transitions, GSAP, Principle, etc…) but none of them fullfilled all of our wishes. So we decided to again embark on our journey for the perfect motion tool.

Our wish list:

Seamless Figma integration

As a designer, you've invested countless hours perfecting your design in Figma—giving layers neat names, setting up auto-layouts, and more. It would be a waste of your time to recreate the same design in a motion tool or HTML/CSS. You want a motion tool that takes your design from Figma one-to-one via an import or plugin. Bonus points if it has two-way integration, so you can use animations in your Figma prototypes.

Frictionless developer handoff

This is the most significant part for us, something that many motion tools lack. Designers must document each interaction, which is extremely time-consuming and can lead to misinterpretation of the animation by someone without motion design skills. Developers usually must guess motion values, install unfamiliar software, click through settings, and manually convert them into code.

Different animation properties per object

Many motion tools allow you to animate from 'state 1' to 'state 2' with the same duration and easing for all objects. However, to create more realistic en beautiful motion, it is necessary to be able to set the duration and easing per object (e.g. opacity, position, etc.).

On the left you see the effect when all properties animatie at the same time: the label is still in view when de button is already shrinking. On the right the correct version


Looking at an animation is different from interacting with one. We are designing for an interactive medium, so it's important to experience how an animation ‘feels’ when you hover, drag, etc. For instance, if you have a grid of cards that animate on hover, you want to know how it feels when you quickly hover over all the cards with your mouse because for a number of items you will probably tone down your motion a bit because it can quickly become to overwhelming.

Nice to haves:

Reusable components

Working with components can be beneficial when constructing layouts, as any changes are reflected in all parts at the same time, which can save time.

Scroll based animatie

Scroll based animations are a common use case. It’s convenient if we could prototype these as well.

Let’s compare!

We've tested and used numerous tools in recent years. These include solutions not specifically for motion, but can be (mis)used for this purpose, such as Webflow and Framer. As designers, we're also quite skilled with a more code-based approach, often using a combination of HTML/CSS and GSAP in CodePen. When comparing the tools we know against our criteria, this is what it looks liked:



For basic micro-animations, such as hovering over a button or card, the most obvious choice is Figma. The main benefit of this is that you can incorporate motion at an early stage in the design process, making alterations simple, and use the animations in your prototypes


For more intricate animations Protopie is the best fit, mostly due to their thoughtfulness regarding the developer handoff process, which eliminates obstacles between design and frontend. Lets see how all our criteria are met when using ProtoPie:

What makes Protopie an ideal choice?

Figma integration is almost seamless via a Figma plugin

Developer handoff is very well thought out. Developers can easily inspect objects, attributes, and values being animated, and this is also represented graphically in a timeline.

Objects can be animated independently, with presets for easing but also the ability to customise them.

Many possibilities in terms of triggers, also for mobile

Captains log

Layout en animatie changelog
Breedte en positie changelog geanimeerd obv vw
In gsap zelfde positionering systematiek hanteren als in je stijlsheet, anders onverwachte effecten. Dus niet in stylesheet: left: 100vw, en dan in gsap x: 300.
Scrolling changelog layover fix codepen) met behulp van GSAP DrawSVG plugin
Bij layover niet handig om main content alleen opacity te geven omdat deze klikbaar blijft wanneer er geen DOM element overheen ligt.
Ontwerp scribbles homepage.
Kleuren zijn moeilijk.
SVG animaties homepage
Geprobeerd svg animaties te implementeren in eleventy
Fail. Lijkt erop dat 11ty bij build svg opbouw veranderd. Wordt vervolgd.
'Scribbles' svg's geanimeerd codepen) met behulp van GSAP DrawSVG plugin
DrawSVG kan geen externe svg's animeren. Inline svg's kunnen niet gebruikt worden als background en dus niet als pseudo element.
Ontwerp scribbles homepage.
Kleuren zijn moeilijk.
CSS Grid
Stylen changelog table gebruikmakend van CSS Grid
Positionering met CSS Grid.
Ontwerp changelog table.
Wat in ontwerp eenvoudig is, is in techniek soms moeilijk.
Implementatie van nunjucks templates en partials voor footer, header, content en changelog.
Dat foutmeldingen in terminal een boel tijd besparen als je ze tenminste ziet. Hoe je zowel .md als .html bestanden kunt gebruiken als basis. Wat frontmatter is.
Verdiept in templating languages.
Hoe templating languages (in dit geval nunjucks en liquid) werken en hoe je een basisstructuur opzet.
Menu, cahngelog en links geanimeerd.
GSAP x:0 is not x:0 maar x:0 vanaf startpositie element in de DOM.
Opzetten typografische basis
Implementatie fonts en styling responsive typografie.
Een 'Fluid typography' systeem opzetten. Tekst gewrongen en styling homepage.
Typografie laten schalen tussen breakpoints gebruikmakend van 'clamp' in css.
Opzetten framework personal site
Eleventy opgezet als static site generator.
Hoe je je eleventy inricht mbv terminal.
Gitlab setup
Wat een SSH key is en waarom je deze nodig hebt. Hoe rechtstreeks te committen vanuit VS Code.