Skip to content

Instantly share code, notes, and snippets.

View piayo's full-sized avatar
🏠
Working from home

piayo.wau piayo

🏠
Working from home
View GitHub Profile
@piayo
piayo / easings.css
Created December 1, 2020 23:56 — forked from argyleink/easings.css
Handy CSS properties for easing functions
:root {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
@piayo
piayo / lit-haunted-element.js
Created November 18, 2020 22:57 — forked from matthewp/lit-haunted-element.js
Haunted State Integration
import { LitElement } from 'lit-element';
import { State } from 'haunted';
export default class LitHauntedElement extends LitElement {
constructor() {
super();
this.hauntedState = new State(() => this.requestUpdate(), this);
}
@piayo
piayo / dnd-hooks-draggable.jsx
Created October 26, 2020 23:46 — forked from crazypixel/dnd-hooks-draggable.jsx
Drag and drop with hooks - Draggable component
import React, {useState, useCallback, useMemo, useEffect} from 'react';
const POSITION = {x: 0, y: 0};
const Draggable = ({children, id, onDrag, onDragEnd}) => {
const [state, setState] = useState({
isDragging: false,
origin: POSITION,
translation: POSITION
});