Skip to content

Instantly share code, notes, and snippets.

View toggle.tsx
<motion.path
d="M7.47998 18.35L10.58 20.75C10.98 21.15 11.88 21.35 12.48 21.35H16.28C17.48 21.35 18.78 20.45 19.08 19.25L21.48 11.95C21.98 10.55 21.08 9.35 19.58 9.35H15.58C14.98 9.35 14.48 8.85 14.58 8.15L15.08 4.95C15.28 4.05 14.68 3.05 13.78 2.75C12.98 2.45 11.98 2.85 11.58 3.45L7.47998 9.55"
stroke-width="1.5"
stroke-miterlimit="10"
fill="none"
strokeDasharray="0 1"
style={{ pathLength: thumbsUp }}
/>
<motion.path
d="M2.38 18.35V8.54999C2.38 7.14999 2.98 6.64999 4.38 6.64999H5.38C6.78 6.64999 7.38 7.14999 7.38 8.54999V18.35C7.38 19.75 6.78 20.25 5.38 20.25H4.38C2.98 20.25 2.38 19.75 2.38 18.35Z"
View toggle.tsx
const thumbsUp = useTransform(x, [15, 100], [0, 1]);
const thumbsUp2 = useTransform(x, [20, 100], [0, 1]);
const thumbsDown = useTransform(x, [-15, -50], [0, 1]);
const thumbsDown2 = useTransform(x, [-10, -100], [0, 1]);
View toggle.tsx
<ToggleCircle
style={{ x }} // this will change the coordinate of the wrapper as you drag
drag="x" // drag direction
dragConstraints={{ left: -100, right: 100 }} // depends how long of a drag you want to allow
dragSnapToOrigin={true} // will bring the wrapper back to the center upon release
dragElastic={0.1} // adds a more natural feel
whileDrag={{ scale: 1.3 }}>
View toggle.tsx
const xInput = [-100, 0, 100];
const color = useTransform(x, xInput, [
theme.colors.pink,
theme.colors.orange,
theme.colors.green,
]);
View toggle.tsx
const Toggle: React.FunctionComponent = () => {
const x = useMotionValue(0);
return (
<ToggleWrapper>
<ToggleCircle>
<svg width="50" height="50" viewBox="0 0 24 24">
<motion.path
d="M5.68999 20.65L6.22032 20.1197L6.18668 20.086L6.14905 20.0569L5.68999 20.65ZM10.55 19.79L9.83747 19.5559L9.82859 19.5829L9.82178 19.6106L10.55 19.79ZM11.92 15.62L11.2149 15.3644L11.211 15.3751L11.2075 15.3859L11.92 15.62ZM7.96999 13.4399L7.22921 13.3225L7.22829 13.3286L7.96999 13.4399ZM8.25999 11.61L7.52685 11.4519L7.52248 11.4721L7.51923 11.4926L8.25999 11.61ZM7.51998 10.35L7.25999 11.0535L7.27134 11.0577L7.28281 11.0615L7.51998 10.35ZM6.25999 10.75L5.63877 10.3298L5.63705 10.3323L6.25999 10.75ZM3.46092 19.8731L5.23093 21.2431L6.14905 20.0569L4.37904 18.6869L3.46092 19.8731ZM5.15966 21.1803C5.40851 21.4292 5.73912 21.5585 5.98692 21.6282C6.25277 21.703 6.53608 21.74 6.77998 21.74V20.24C6.67388 20.24 6.5272 20.222 6.39305 20.1843C6.32781 20.1659 6.2773 20.1462 6.24255 20.1288C6.20533 20