For precision 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 = 30For precision 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| // | |
| // Prelude | |
| // A zero dependency, one file drop in for faster Typescript development with fewer bugs | |
| // through type safe, functional programming. Comments are inline with links to blog posts motiviating the use. | |
| // alias for a function with airity 1 | |
| export type Fn<A, B> = (a: A) => B; | |
| // alias for a function with airity 2 |
In this readme we will use the eds.equinor.com domain as an example. Can be done for any sub domain, given you have setup correct DNS/Re-routing.
Run in terminal
openssl req -new -newkey rsa:2048 -nodes -keyout eds.equinor.com.key -out request.csrIn this readme we will use the eds.equinor.com domain as an example. Can be done for any sub domain, given you have setup correct DNS/Re-routing.
Run in terminal
openssl req -new -newkey rsa:2048 -nodes -keyout eds.equinor.com.key -out request.csrThis is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the :root element.
There are a couple of main reasons this is helpful:
See the Tailwind Plugins for more info on plugins.
| /* | |
| * This script fetches all color styles from a Figma team/document. | |
| * | |
| * Dependencies: | |
| * | |
| * - node-fetch | |
| * | |
| * Due to a limitation in the Figma /styles endpoint, we need to use a | |
| * document for actually using the colors in a color grid 🙄That's why | |
| * we're both fetching from /styles and /files below. |
| /** | |
| * Easing functions | |
| * | |
| * https://gist.github.com/gre/1650294 | |
| * http://easings.net | |
| */ | |
| // no easing, no acceleration | |
| export function easeLinear(t){ return t } | |
| // accelerating from zero velocity | |
| export function easeInQuad(t){ return t*t } |
| <html> | |
| <head> | |
| <script> | |
| customElements.define("star-wars-planets", class extends HTMLElement { | |
| constructor() { | |
| super(); | |
| this.attachShadow({ mode: "open" }); | |
| } | |
| static get observedAttributes() { return ["loading", "planets"]; } |
| // | |
| // Figma project stats | |
| // Pulls statistics like number of files, frames, versions etc for a project. | |
| // | |
| // Usage: | |
| // export FIGMA_API_ACCESS_TOKEN='your-token' | |
| // node figma-project-stats.js <project-id> | |
| // | |
| // You can generate tokens in your account settings or at | |
| // https://www.figma.com/developers/explorer#personal-access-token |