Python easing functions
For precise programmatic animation
- Translated from the JavaScript in Sean Yen’s Easing equations
- Illustrations adapted from Andrey Sitnik and Ivan Solovev’s Easings.net
Example usage:
duration = 30
for frame in range(duration):
return ease_in_out_quad(frame/duration)linear
def linear(t):
return tease_in_sine
def ease_in_sine(t):
import math
return -math.cos(t * math.pi / 2) + 1ease_out_sine
def ease_out_sine(t):
import math
return math.sin(t * math.pi / 2)ease_in_out_sine
def ease_in_out_sine(t):
import math
return -(math.cos(math.pi * t) - 1) / 2ease_in_quad
def ease_in_quad(t):
return t * tease_out_quad
def ease_out_quad(t):
return -t * (t - 2)ease_in_out_quad
def ease_in_out_quad(t):
t *= 2
if t < 1:
return t * t / 2
else:
t -= 1
return -(t * (t - 2) - 1) / 2ease_in_cubic
def ease_in_cubic(t):
return t * t * tease_out_cubic
def ease_out_cubic(t):
t -= 1
return t * t * t + 1ease_in_out_cubic
def ease_in_out_cubic(t):
t *= 2
if t < 1:
return t * t * t / 2
else:
t -= 2
return (t * t * t + 2) / 2ease_in_quart
def ease_in_quart(t):
return t * t * t * tease_out_quart
def ease_out_quart(t):
t -= 1
return -(t * t * t * t - 1)ease_in_out_quart
def ease_in_out_quart(t):
t *= 2
if t < 1:
return t * t * t * t / 2
else:
t -= 2
return -(t * t * t * t - 2) / 2ease_in_quint
def ease_in_quint(t):
return t * t * t * t * tease_out_quint
def ease_out_quint(t):
t -= 1
return t * t * t * t * t + 1ease_in_out_quint
def ease_in_out_quint(t):
t *= 2
if t < 1:
return t * t * t * t * t / 2
else:
t -= 2
return (t * t * t * t * t + 2) / 2ease_in_expo
def ease_in_expo(t):
import math
return math.pow(2, 10 * (t - 1))ease_out_expo
def ease_out_expo(t):
import math
return -math.pow(2, -10 * t) + 1ease_in_out_expo
def ease_in_out_expo(t):
import math
t *= 2
if t < 1:
return math.pow(2, 10 * (t - 1)) / 2
else:
t -= 1
return -math.pow(2, -10 * t) - 1ease_in_circ
def ease_in_circ(t):
import math
return 1 - math.sqrt(1 - t * t)ease_out_circ
def ease_out_circ(t):
import math
t -= 1
return math.sqrt(1 - t * t)ease_in_out_circ
def ease_in_out_circ(t):
import math
t *= 2
if t < 1:
return -(math.sqrt(1 - t * t) - 1) / 2
else:
t -= 2
return (math.sqrt(1 - t * t) + 1) / 2More design posts
Jack
It bothers me that I can’t remember exactly when and where I met Jack. I’m usually pretty good about that. It was probably 2007-ish, probably at SXSW or An Event Apart. I was going to a lot of conferences back then, meeting all kinds of web people from all over the place, and Jack was a web person, though we didn’t talk about the web all that much once we found other things we had… See more →
V7: Say hello to my listening diary
Monthly reports of my most-played music, going back to 2005
After finally completing the gargantuan task of manually adding metadata to thousands of my old tweets so they could be more integrated with the rest of my site, I wanted to keep the momentum going. So I turned to the last large personal data source that was still missing from my site: Last.fm, a service for tracking and sharing the music you listen to. As of a few days ago, I’ve been a Last.fm user… See more →
Customizing ordered list styles
A simple and reliable way to use CSS counters
One web browser default I’m seldom satisfied with is the appearance of list markers. Their style can be customized with CSS using li::marker, but the options there are limited. The best way I’ve found to fully customize them is to remove default list styles and use a li::before pseudo-element as a list marker:
ol,
ul {
list-style: none;
}
li::before {
content: "•";
}I’ve used a plain old bullet in this example, but content’s value can be whatever you want, and you can also use position, background, and… See more →
V7: Backfilling metadata
Six thousand tweets. Ten months. One taxonomy.
Last week? Not my favorite week. My dog injured her leg while playing with other dogs in the park. My basement needed some emergency masonry work. My acid reflux graduated from intermittent warning shots to full-on assault. But somehow, in the midst of all this, I managed to finish up a project I’ve been chipping away at for countless hours over the past 10 months: manually adding metadata to the nearly 6,000 old tweets I’ve… See more →
Ethan Marcotte’s redesign
My good friend and web design hero Ethan Marcotte has redesigned his personal site for the second time in a little over a year, and it’s a thing of beauty. Every last bit of it is thoughtfully considered without being overworked, from the simple structure, to the inventive grid, to the elegant typography, to the subtle textural motifs. And that joyful splash of watercolor at the top! For the nerds, there are some clever implementations… See more →
Moving on
We’ve been prepping my childhood home for an estate sale taking place in a few weeks, and my primary task has been getting my remaining unsalable old junk out of there. A lot of it has turned out to be assignments from college: a big stack of portfolios filled with charcoal nudes and various graphic design things mounted on black boards with tracing paper overlays for professors’ commentary. Sketches, marker comps, paste-ups, digital prints. Typesetting,… See more →
The absorbingly impenetrable typography of Analogical Force and Geometric Love
Analogical Force, an electronic music label based in Madrid, found its way onto my radar earlier this year when I picked up Oh Mr. James’s fun I’m Not Here EP. Most of the label’s output honestly doesn’t do much for me, but its design is another story, which for the last several years has largely been handled by the UK-based Geometric Love, a.k.a. Steve Hyland. I especially enjoy Hyland’s fearless lettering, which is almost entirely… See more →
XOXO Explore
In its founders’ own words, XOXO was “an experimental festival celebrating independent artists and creators working on the internet,” and its final edition, which included Cabel Sasser’s charming tale of going all the way down the rabbit hole of a painting that caught his attention in a McDonald’s in Washington, took place in 2024. I attended XOXO in 2014 and 2018 and was impressed on both occasions with the extraordinary care that went into the… See more →
Claire Tabouret’s Stained-Glass Windows for Notre-Dame Divide French Society, with a Legal Threat Looming
A project has been in the works for a couple years to replace a number of Notre-Dame’s stained-glass windows with contemporary designs, which has unsurprisingly caused an uproar. While the arguments for and against generally take familiar shapes—whether historic architecture should accommodate modern expression, whether these decisions should be top-down or community-driven—one functional aspect of the kerfuffle caught my attention:
The windows’ light gray, non-figurative glass allows more light to enter the cathedral, achieved via… See more →
Loud Room
Jason Santa Maria’s new independent design practice has a great name and a great logo, befitting the quality and character of his work. And the site, an appropriately simple introduction, sports a fresh, fun, procedurally-generated color scheme every time it loads. Don’t miss his blog post with the backstory!