Animation
The “Squirrel curve”
Websites aren’t just how they look – it's also about how they feel.
Good sites aren’t just a static thing. Things move, they fade in, dafe out, change color, move into view, exit out of view, all that good stuff.
The things that determines in what way they move is what we call easing, implemented using what’s called a bezier curve. It’s a bit of maths that describe a shape, and that shape is used to affect the timings of that motion.
A bezier curve, when used on a website via CSS, takes the form of cubic-bezier(1.000, 0.11, 0.265, 1.080); but a visual example might be more useful:
Linear Curve
Moves in a straight line from A to B. Vanilla, boring, and with no pizazz.
Standard EaseInOut Curve
With a bit of variation, pretty much what everybody uses though.
The “Squirrel Curve”
An opinionated curve, custom for Squirrel… and hey, it looks like a Squirrel tail!
Why do we need our own curve?
Because motion is just as important a part of how we express our brand as things like colour, spacing, and typography. We want to own how our website (and eventually our other digital products) feel when using them.
Below are some examples of this thinking in context. Each example demonstrates the Squirrel curve, alongside your common-or-garden “linear” curve. Hopefully you can see how being opinionated about easing can make a huge difference :)
Simple example
This illustrates the concept pretty well – the two dots take exactly the same time to translate across, and hopefully you’ll agree there's a big difference to how each feels.
Pop example
Another example, this time showing how it works for scale, rather than translation.
Modal example
What about something we might actually use on the website? How about introducing a modal window.
Here is a card
Hover over it for 'hover' state, click & hold for 'active' state
The Squirrel Curve
Here is a card
Hover over it for 'hover' state, click & hold for 'active' state
Linear
So we use this curve for everything?
Absolutely not! For some things, especially microinteractions with thinks like buttons & links, you don’t wanna get too cute or take too long. For these we simplify it a bit. Again, we want customers to feel it, rather than necessarily be cognisant that it’s happening.
Hover over me! (don’t click me though, I don’t go anywhere)
Room to be creative
We might also find we want a particular interaction / animation to feel a different way. We can always compose specific easing curves as well. Here's one a bit more 'bouncy' for example: