feat: replace gsap animations with CSS transitions

package.json

@@ -86,7 +86,6 @@
     "react": "^16.14.0 || ^17.0.0"
   },
   "dependencies": {
-    "gsap": "^3.9.1",
     "react-aria": "^3.12.0",
     "react-stately": "^3.11.0"
   }

src/animationIcons/CheckIcon.tsx

@@ -1,30 +1,44 @@
 import type { SVGProps } from 'react';
 import { styled } from '../../stitches.config';
+import { easeOutExpo, easeInQuad } from '../primitives/animation';
 
 const Path = styled('path', {
-  'input:checked ~ div &': {
-    transition: 'stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1)',
+  transition: `stroke-dashoffset 0.2s ${easeInQuad}`,
+  variants: {
+    isChecked: {
+      true: {
+        transition: `stroke-dashoffset 1s ${easeOutExpo}`,
+      },
+    },
   },
-  transition: 'stroke-dashoffset 0.2s cubic-bezier(0.11, 0, 0.5, 0)',
 });
 
-export const CheckIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="img"
-    viewBox="0 0 16 16"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <Path
-      d="M0.709339 7.44716L5.70834 12.4462L15.3004 2.8541"
-      stroke="currentColor"
-      strokeDasharray="21 21"
-      strokeMiterlimit="10"
-      strokeWidth="2"
-    />
-  </svg>
-);
+type CheckIconProps = SVGProps<SVGSVGElement> & {
+  isChecked?: boolean;
+};
+
+export const CheckIcon = (props: CheckIconProps) => {
+  const { isChecked, ...svgProps } = props;
+
+  return (
+    <svg
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="img"
+      viewBox="0 0 16 16"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      {...svgProps}
+    >
+      <Path
+        d="M0.709339 7.44716L5.70834 12.4462L15.3004 2.8541"
+        isChecked={isChecked}
+        stroke="currentColor"
+        strokeDasharray="21 21"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};

src/components/Checkbox.tsx

@@ -2,13 +2,13 @@ import type {
   CheckboxProps as RTCheckboxProps,
   ToggleProps,
 } from '@react-types/checkbox';
-import { gsap } from 'gsap';
 import type { ComponentPropsWithRef, ReactNode } from 'react';
-import { useEffect, useRef } from 'react';
+import { useState, useRef } from 'react';
 import { useCheckbox } from 'react-aria';
 import { useToggleState } from 'react-stately';
 import { styled } from '../../stitches.config';
 import { CheckIcon } from '../animationIcons/CheckIcon';
+import { easeOutExpo } from '../primitives/animation';
 
 const Label = styled('label', {
   '& input:checked:disabled + div': {
@@ -48,9 +48,6 @@ const Input = styled('input', {
     transform: 'translate(-50%, -50%)',
     width: '12px',
   },
-  '&:invalid': {
-    borderColor: '$uiErrorRegular',
-  },
   appearance: 'none',
   backgroundColor: '$brandWhite',
   borderColor: '$gray50',
@@ -60,6 +57,15 @@ const Input = styled('input', {
   height: '24px',
   margin: '0',
   position: 'relative',
+  transform: 'scale(1)',
+  transition: `transform 0.2s ${easeOutExpo}`,
+  variants: {
+    isPressed: {
+      true: {
+        transform: 'scale(0.9)',
+      },
+    },
+  },
   width: '24px',
 });
 
@@ -93,31 +99,19 @@ export const Checkbox = ({
     { isSelected, setSelected, toggle },
     ref
   );
-  const checkedTl = useRef<GSAPTimeline>(gsap.timeline({ paused: true }));
-
-  useEffect(() => {
-    checkedTl.current
-      .to(ref.current, {
-        duration: 0.1,
-        ease: 'quad.easeIn',
-        scale: 0.9,
-      })
-      .to(ref.current, {
-        duration: 0.1,
-        ease: 'quad.easeOut',
-        scale: 1,
-      });
-  }, []);
-
-  useEffect(() => {
-    checkedTl.current.play(0);
-  }, [isSelected]);
+  const [isPressed, setIsPressed] = useState(false);
 
   return (
-    <Label>
-      <Input {...inputProps} {...restProps} ref={ref} />
+    <Label
+      onMouseDown={() => setIsPressed(true)}
+      onMouseUp={() => setIsPressed(false)}
+    >
+      <Input isPressed={isPressed} {...inputProps} {...restProps} ref={ref} />
       <IconContainer>
-        <CheckIcon strokeDashoffset={isSelected ? '' : '21'} />
+        <CheckIcon
+          isChecked={isSelected}
+          strokeDashoffset={isSelected ? '' : '21'}
+        />
       </IconContainer>
       {label}
     </Label>

src/primitives/animation.ts

@@ -0,0 +1,19 @@
+// Easing
+export const easeInQuad = 'cubic-bezier(0.55, 0.085, 0.68, 0.53)';
+export const easeInCubic = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
+export const easeInQuart = 'cubic-bezier(0.895, 0.03, 0.685, 0.22)';
+export const easeInQuint = 'cubic-bezier(0.755, 0.05, 0.855, 0.06)';
+export const easeInExpo = 'cubic-bezier(0.95, 0.05, 0.795, 0.035)';
+export const easeInCirc = 'cubic-bezier(0.6, 0.04, 0.98, 0.335)';
+export const easeOutQuad = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+export const easeOutCubic = 'cubic-bezier(0.215, 0.61, 0.355, 1)';
+export const easeOutQuart = 'cubic-bezier(0.165, 0.84, 0.44, 1)';
+export const easeOutQuint = 'cubic-bezier(0.23, 1, 0.32, 1)';
+export const easeOutExpo = 'cubic-bezier(0.19, 1, 0.22, 1)';
+export const easeOutCirc = 'cubic-bezier(0.075, 0.82, 0.165, 1)';
+export const easeInOutQuad = 'cubic-bezier(0.455, 0.03, 0.515, 0.955)';
+export const easeInOutCubic = 'cubic-bezier(0.645, 0.045, 0.355, 1)';
+export const easeInOutQuart = 'cubic-bezier(0.77, 0, 0.175, 1)';
+export const easeInOutQuint = 'cubic-bezier(0.86, 0, 0.07, 1)';
+export const easeInOutExpo = 'cubic-bezier(1, 0, 0, 1)';
+export const easeInOutCirc = 'cubic-bezier(0.785, 0.135, 0.15, 0.86)';

yarn.lock

@@ -9149,11 +9149,6 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.3,
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
-gsap@^3.9.1:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.9.1.tgz#d4c7443540497afee9ddc0824fd0180224e33360"
-  integrity sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w==
-
 gud@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"