Feat(framer): complete transition to framer

Author: noahehall

README.md

@@ -16,7 +16,7 @@ bun add \
   framer-motion \
   react \
   react-dom \
-  git@github.com:noahehall/react-fullerpage.git
+  github:noahehall/react-fullerpage
 
 ```
 

bun.lockb

@@ -9379,7 +9379,7 @@ var FPContainer = ({
   outerStyle = {},
   scrollDebounceMs = 125,
   style = {},
-  transitionTiming = 700
+  transitionTiming = 0.5
 }) => {
   const FPContainerInnerRef = import_react19.useRef(null);
   const scrollTimer = import_react19.useRef(null);
@@ -9406,7 +9406,6 @@ var FPContainer = ({
     offsetHeight: 0,
     resetScroll: false,
     slideIndex: 0,
-    transitionTiming,
     translateY: 0,
     viewportHeight: 0
   });
@@ -9426,12 +9425,11 @@ var FPContainer = ({
           forward();
         else if (prevScrollY > newScrollY)
           back3();
-        if (pageState.resetScroll || transitionTiming !== pageState.transitionTiming)
+        if (pageState.resetScroll)
           startTransition(() => {
             setPageState((prevState) => ({
               ...prevState,
-              resetScroll: false,
-              transitionTiming
+              resetScroll: false
             }));
           });
         ticking.current = false;
@@ -9440,7 +9438,7 @@ var FPContainer = ({
     }
     setTimeout(() => {
       throttled.current = false;
-    }, transitionTiming);
+    }, transitionTiming * 1000);
   };
   const bouncedHandleScroll = () => {
     clearTimeout(scrollTimer.current);
@@ -9497,11 +9495,11 @@ var FPContainer = ({
   const goto = (slideIndex, resetScroll = false) => {
     if (!slides[slideIndex] || pageState.slideIndex === slideIndex || isSsr)
       return;
-    const { transitionTiming: transitionTiming2, fullpageHeight, viewportHeight } = pageState;
+    const { fullpageHeight, viewportHeight } = pageState;
     const newSlide = slides[slideIndex];
     const translateY = Math.max((fullpageHeight - viewportHeight) * -1, newSlide.current.offsetTop * -1);
     if (typeof onHide === "function") {
-      setTimeout(() => onHide(translateY, transitionTiming2));
+      setTimeout(() => onHide(translateY, transitionTiming * 1000));
     }
     throttled.current = true;
     const newPageState = {
@@ -9516,7 +9514,7 @@ var FPContainer = ({
     setTimeout(() => {
       throttled.current = false;
       scrollY.current = window.scrollY;
-    }, transitionTiming2);
+    }, transitionTiming * 1000);
     if (typeof onShow === "function") {
       onShow(newPageState);
     }
@@ -9573,13 +9571,15 @@ var FPContainer = ({
   return jsx_runtime.jsx("div", {
     style: useOuterStyle,
     children: jsx_runtime.jsx(motion2.div, {
-      ref: FPContainerInnerRef,
       className,
-      style: {
-        transition: `transform ${pageState.transitionTiming}ms cubic-bezier(0.645, 0.045, 0.355, 1.000)`,
-        transform: `translate3D(0, ${pageState.translateY}px, 0)`,
-        ...useStyle2
+      ref: FPContainerInnerRef,
+      style: useStyle2,
+      animate: { y: pageState.translateY },
+      transition: {
+        ease: [0.17, 0.67, 0.83, 0.67],
+        duration: transitionTiming
       },
+      layout: true,
       ...motionProps,
       children
     })
@@ -9863,9 +9863,10 @@ var ReactFP = ({
           unsubscribe
         },
         children: jsx_runtime4.jsx(motion2.div, {
-          style: useStyle2,
-          ref: ReactFPRef,
           className,
+          layout: true,
+          ref: ReactFPRef,
+          style: useStyle2,
           ...motionProps,
           children: jsx_runtime4.jsx(import_react23.Suspense, {
             fallback: jsx_runtime4.jsx(Fallback, {}),

dist/index.js

@@ -20,18 +20,21 @@
     "react": "18.x"
   },
   "devDependencies": {
-    "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
     "@types/react-router-dom": "5.3.3",
+    "@types/react": "18.2.7",
     "barrels": "1.6.6",
     "bun-types": "canary",
-    "eslint": "8.41.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",
+    "eslint": "8.41.0",
+    "framer-motion": "10.12.16",
     "npm-check-updates": "16.10.12",
     "prettier": "2.8.8",
+    "react-dom": "18.2.0",
+    "react": "18.2.0",
     "typescript": "beta"
   },
   "files": [

package.json

@@ -43,7 +43,7 @@ export const FPContainer: FC<FPContainerInterface> = ({
   outerStyle = {},
   scrollDebounceMs = 125,
   style = {},
-  transitionTiming = 700,
+  transitionTiming = 0.5,
 }) => {
   const FPContainerInnerRef = useRef<HTMLDivElement>(null);
   const scrollTimer = useRef<Timer>(null);
@@ -83,7 +83,6 @@ export const FPContainer: FC<FPContainerInterface> = ({
     offsetHeight: 0,
     resetScroll: false,
     slideIndex: 0,
-    transitionTiming,
     translateY: 0,
     viewportHeight: 0,
   });
@@ -107,15 +106,11 @@ export const FPContainer: FC<FPContainerInterface> = ({
         else if (prevScrollY < newScrollY) forward();
         else if (prevScrollY > newScrollY) back();
 
-        if (
-          pageState.resetScroll ||
-          transitionTiming !== pageState.transitionTiming
-        )
+        if (pageState.resetScroll)
           startTransition(() => {
             setPageState((prevState) => ({
               ...prevState,
               resetScroll: false,
-              transitionTiming,
             }));
           });
 
@@ -126,7 +121,7 @@ export const FPContainer: FC<FPContainerInterface> = ({
 
     setTimeout(() => {
       throttled.current = false;
-    }, transitionTiming);
+    }, transitionTiming * 1000);
   };
 
   const bouncedHandleScroll = () => {
@@ -201,7 +196,7 @@ export const FPContainer: FC<FPContainerInterface> = ({
     if (!slides[slideIndex] || pageState.slideIndex === slideIndex || isSsr)
       return;
 
-    const { transitionTiming, fullpageHeight, viewportHeight } = pageState;
+    const { fullpageHeight, viewportHeight } = pageState;
 
     const newSlide = slides[slideIndex];
 
@@ -212,7 +207,7 @@ export const FPContainer: FC<FPContainerInterface> = ({
 
     // TODO(noah): no clue what the original author meant
     if (typeof onHide === "function") {
-      setTimeout(() => onHide(translateY, transitionTiming));
+      setTimeout(() => onHide(translateY, transitionTiming * 1000));
     }
 
     throttled.current = true;
@@ -231,7 +226,7 @@ export const FPContainer: FC<FPContainerInterface> = ({
     setTimeout(() => {
       throttled.current = false;
       scrollY.current = window.scrollY;
-    }, transitionTiming);
+    }, transitionTiming * 1000);
     // TODO(noah): no clue what the original author meant
     if (typeof onShow === "function") {
       onShow(newPageState);
@@ -298,13 +293,15 @@ export const FPContainer: FC<FPContainerInterface> = ({
   return (
     <div style={useOuterStyle}>
       <motion.div
-        ref={FPContainerInnerRef}
         className={className}
-        style={{
-          transition: `transform ${pageState.transitionTiming}ms cubic-bezier(0.645, 0.045, 0.355, 1.000)`,
-          transform: `translate3D(0, ${pageState.translateY}px, 0)`,
-          ...useStyle,
+        ref={FPContainerInnerRef}
+        style={useStyle}
+        animate={{ y: pageState.translateY }}
+        transition={{
+          ease: [0.17, 0.67, 0.83, 0.67],
+          duration: transitionTiming,
         }}
+        layout
         {...motionProps}
       >
         {children}

src/FPContainer.tsx

@@ -104,9 +104,10 @@ export const ReactFP: FC<ReactFPInterface> = ({
         }}
       >
         <motion.div
-          style={useStyle}
-          ref={ReactFPRef}
           className={className}
+          layout
+          ref={ReactFPRef}
+          style={useStyle}
           {...motionProps}
         >
           <Suspense fallback={<Fallback />}>{children}</Suspense>