From d050b298a9a351e61d62a5259837c71fed649043 Mon Sep 17 00:00:00 2001 From: poop Date: Mon, 29 May 2023 15:21:28 -0500 Subject: [PATCH] Feat(framer): complete transition to framer --- README.md | 2 +- bun.lockb | Bin 260062 -> 260062 bytes dist/index.js | 33 +++++++++++++++++---------------- package.json | 7 ++++--- src/FPContainer.tsx | 29 +++++++++++++---------------- src/ReactFP.tsx | 5 +++-- 6 files changed, 38 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 8ab1852..e50de03 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ bun add \ framer-motion \ react \ react-dom \ - git@github.com:noahehall/react-fullerpage.git + github:noahehall/react-fullerpage ``` diff --git a/bun.lockb b/bun.lockb index 08fed6fad406f2447eeda53dc0ea078a210a3354..0d1cb022f639e17fe2b57a094ff9de800b2e5ea5 100755 GIT binary patch delta 14275 zcmc&)O>7%Q6n;)pRDM%b@e`zq10dSS3C*Du2#H7>0QH0df-8=_jn+6`v+Gt=&^}8@ z?FFHt!VM`0df}E^#2plYR3XHr7a~q@LXkjRkQ()UJL7oQcI@5tc*auXWkloqt(-kLaxjc31B)(J@MYPRO5+6Lmh@F7IrYOQ-ML z`lEb|I|qv}+b)%V{$f_X&+M+!5Nu9kb7I@In-Q!PdhNFFg}Wu9dFdQ>u)$9kLw`qM zJkAg#k+*r-3yH3a@uNb54h>;Eaffg)tjciZv;0!E;V;)CIG7FNtcFvvlQ=2hwK-=v zpIqjMH7{qJC*#DLSM<*xGzOjFT+v#b7^}pOma4wQ+q&Nbt1RS$MIHuP#5m=RMPkj1 z^>>6cR-EA>b7F;9^Kvp6Y!Yi;(ch8$SP=`Sg#RIN;ki>pvOjm=%!2%G4da}|@owjD zhLwxr?XyHD@@m=kPEC?lPbvm=TiQN3ui7fD)6Y3iPYMyhW>nw=n)AT zV9lWBEp1$BJ-@2bEwE4*CCPd+1BUo7+}J={R;5%$T#^o& z#Nzs|Xoo5mT5S}bZ@xkFu;_y6YzCPzo}{sXwi15@yf#3rc~Spmkqc7)c7f;_k@#=< z#!`gTlVWVT!<_xGv618?*1S^xO)6nAV$F;EXL3ICI>V*{DKD|+Ww-K^9kWnwL9>{-M$sB*rw!xklKOKL4o^J*eZTQkCcLLC_+`DQ_$iYu>p2 z8!n9%XV|U$HCcbXV6Zac^ng+SIg~$Sr_o=N{nx4d9jX6Z%HKr(PiG{%LC9|9KVT>F zV?R(A7)1YnKTVuscu~-}?9utFz30Mknwap%M=IB^sb@NUe?icLMH?8~AQ{2I9or*L zJA?ISN$NDQ=4D6o-gSoE$}jofsr=W3A5WsrRA6;q$(agq{nrf!6Dp`DqV(HPO!2Tc zq>@?LZn_nn;Y=^3%lvoG|9YTB4E0|Y;*!{%|Ay!Z89{P$niOMG9jbZvBHYBA-Rf1< z^=Ks4tN+Fr9@dFw?WF!Q+u>k;Q0AR)(|HEih1*0=BL5|qT?|^pxO)-IHnHYqC4i(a*AY`Y}zm+)ub0R;^|J)F3UhF>x(rD-C3^zKq4$uD_slZd0A3J3rDr1-ZZ@;%w zs#kuZf3Ekn(g~#Qe_sfaLg&cBA9q-&v4OViidgfWD|Gt3bNlSfrIlAoD`%HKmZ_!C zt5k6(=jLB`_ZDvc@YRXZ%FF6Mav?ZQ@Si;W>i_pBV46}Umy1v(6 zy?XVks&{L9VrzS1{mZG{zv=6{nkt2~o!SW-Cp*4-oIczt+f@i_1zx-Dd%>MCfC+$A zwqqOqL>RZX1BN?+eHfF3-tuKH0Jui2yhJ42U~vrXG{_DHHF{jSswZl7zq%B%gQ*y1 zH7v;vQ#~w+*zjULxvV>b8T-jPvEjv0g2tjVm@8Tf67wkW!|9q&qh#K1aBDRF`ay>n zc6sBF*zls3!9B6zrSaF-CoY}AWH7iSHoT~!P=HwTR*>XBbOc}@&1i4X_oSKGTwyp0 zv6}7tqY^7kRZq8s>k{zacSQ4?}rTmviu7S?5{7Yf8 z@h-J@C z685?mW4q-q7W|+Eu;+Memk%TTN546~mz@dy#jxEByqoXnDwv&4#fV?^NvdHS}R`9mBfXe_FLxuVq~vEfD0=ns7yVa(c80rMmao5Y4!)qjFH08>*Yr`D(% zy8i)fWsnMtHJS_F^x{hE%`-aPG8UMk#4IjUSvMR@)PKVb<2uo*9oK(W8_d}rat$|3 zE|&G_M|#U8X=e#j`yZ;GMr}~XLaWV%=O-Tn>^GyN(aeHT{g=(KBs;GE@_TL18O$RW zOTBp(;4n%2fWCPsa+Om6!y-3ZxR>UCOHVSIGg19lK*G_8P1m6mvEfBo`Dy>DXapCM ze-kYZCmx<&Soa&03xB;3?~)J0FsorncDnu>=3z<1s@uH~^T}o18O+#E!-%=xlWTfj zzVi{x9-3Rm>62Xh_hPF4>jgQdJHjy4!*ZRW{2T3dl>NlqO|-8OG^k4+E&%N16wLKs zALtOnE^izX8(!2hxFpo&5PV#ABF^7HwVr2KoM`cEndQHt2` zqOAN;{U@OU&j%rzw;CROo!G_j!e;%l2eVh=)of4_h7k#SbM2~L)0y`d)Uv!}jN)I0 z*zgiRuVNiOarXmL{mIAR-JnBE)qf@T@vw(OS^4WIE5EA$1my=5jsChH@Bi6UL9d9q zPeVD+^q-JY{a03MjWR0}59B~cd47;Ho&CRo9wrjD@)1yh^p})>jrawlf3=pZ{{-Zx^-lr$Ie~osr(UGoy_0lFUyUwU1{Uzn^?EgurK>z6WqVh-ke`Tw{Gi8&8I@cPHx8s@8!<^@}Y3G1> zH!@Ll_ZvW;|K|1Dp40F5oX1f=Wp!p_?PTTB%zO0uvc3XuuEuX6-T3d`)}b4Jd_URw gh2FJORmN8bPe1XmpTDSoxqfcGvT<&H*S9}B2l7$--2eap diff --git a/dist/index.js b/dist/index.js index 3bb057a..317d0ee 100644 --- a/dist/index.js +++ b/dist/index.js @@ -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, {}), diff --git a/package.json b/package.json index 10629f1..ed17bd5 100644 --- a/package.json +++ b/package.json @@ -21,17 +21,18 @@ }, "devDependencies": { "@types/react": "18.2.7", - "@types/react-dom": "18.2.4", - "@types/react-router-dom": "5.3.3", "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": [ diff --git a/src/FPContainer.tsx b/src/FPContainer.tsx index 1943121..e40fe6e 100644 --- a/src/FPContainer.tsx +++ b/src/FPContainer.tsx @@ -43,7 +43,7 @@ export const FPContainer: FC = ({ outerStyle = {}, scrollDebounceMs = 125, style = {}, - transitionTiming = 700, + transitionTiming = 0.5, }) => { const FPContainerInnerRef = useRef(null); const scrollTimer = useRef(null); @@ -83,7 +83,6 @@ export const FPContainer: FC = ({ offsetHeight: 0, resetScroll: false, slideIndex: 0, - transitionTiming, translateY: 0, viewportHeight: 0, }); @@ -107,15 +106,11 @@ export const FPContainer: FC = ({ 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 = ({ setTimeout(() => { throttled.current = false; - }, transitionTiming); + }, transitionTiming * 1000); }; const bouncedHandleScroll = () => { @@ -201,7 +196,7 @@ export const FPContainer: FC = ({ 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 = ({ // 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 = ({ 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 = ({ return (
{children} diff --git a/src/ReactFP.tsx b/src/ReactFP.tsx index c8bf7c9..f67b20a 100644 --- a/src/ReactFP.tsx +++ b/src/ReactFP.tsx @@ -104,9 +104,10 @@ export const ReactFP: FC = ({ }} > }>{children}