feat: initial={false} (#12)

* yeet

* Update CHANGELOG.md

CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- `initial={false}`, allows you to skip the initial animation when the component mounts.
+
+  In short, it takes the first value of `animate` and applies it as styles immediately.
+
+  ```jsx
+  return (
+    <m.div
+      initial={false}
+      animate={{width}}
+    />
+    /* equivalent to initial={{width}} */
+  )
+  ```
+
 ## 0.0.2 - 2023-08-12
 
 ### Added

packages/motioned/src/m.tsx

@@ -4,6 +4,7 @@ import {
   matchAgainstVariants,
   matchAnimatePropertyNameToCssVariableName,
   mapEasingOrEasingList,
+  stripTransition,
 } from './utils.js';
 import {
   AnimateOptions,
@@ -227,25 +228,29 @@ const makeMElem = <TElement extends keyof React.JSX.IntrinsicElements>(
         variants,
         ...rest
       }: {
-        initial?: AnimateProperties | NoInfer<TVariants>;
+        initial?: AnimateProperties | NoInfer<TVariants> | false;
         animate: AnimateOptions | NoInfer<TVariants>;
         variants?: Variants<TVariants>;
         ref?: React.Ref<ElementTypeOf<TElement>>;
       } & ComponentProps<TElement>,
       ref: ForwardedRef<TElement>,
     ) => {
+      const initialOrAnimate = stripTransition(
+        initial === false ? animate : initial,
+      );
       const memodMatchedInitial = useMemo(
         () =>
-          initial
+          initialOrAnimate
             ? animatePropertiesToStyle(
                 matchAgainstVariants(
                   variants,
-                  initial as AnimateOptions | string,
+                  initialOrAnimate as AnimateOptions | string,
                 ) as AnimateProperties,
               )
             : {},
         [],
       );
+
       const elem = useRef<HTMLDivElement>(null!);
 
       useAnimation(elem, animate, variants);

packages/motioned/src/utils.ts

@@ -377,3 +377,12 @@ export const bezierDefinitionToEasing = (
   }
   return `cubic-bezier(${definition.join(',')})`;
 };
+
+export const stripTransition = <
+  T extends AnimateOptions | AnimateProperties | undefined,
+>(
+  x: T,
+): Omit<T, 'transition'> => {
+  const { transition, ...rest }: any = x ?? {};
+  return rest;
+};

packages/website/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --port 3001",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"