Add transition prop

Author: pomber

packages/mini-browser/src/mini-browser-hike.tsx

@@ -4,11 +4,14 @@ import { TitleBar } from "./title-bar"
 import { MiniBrowserStep, useSteps } from "./use-steps"
 import { useClasser, Classes } from "@code-hike/classer"
 
+type Transition = "none" | "slide"
+
 export type MiniBrowserHikeProps = {
   progress?: number
   backward?: boolean
   classes?: Classes
   steps?: MiniBrowserStep[]
+  transition?: Transition
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>
 
 const MiniBrowserHike = React.forwardRef<
@@ -21,6 +24,7 @@ function MiniBrowserWithRef(
     progress = 0,
     backward = false,
     steps: ogSteps,
+    transition = "none",
     classes,
     ...props
   }: MiniBrowserHikeProps,
@@ -29,16 +33,6 @@ function MiniBrowserWithRef(
   const c = useClasser("ch-mini-browser", classes)
   const steps = useSteps(ogSteps)
 
-  // TODO readability and optional
-  const X = 50
-  const t = progress - Math.floor(progress)
-  const x = t <= 0.5 ? -X * t : X - X * t
-  const o = Math.abs(t - 0.5) * 2
-
-  // const stepIndex = backward
-  //   ? Math.floor(progress)
-  //   : Math.ceil(progress)
-
   const stepIndex = Math.round(progress)
 
   const { zoom, displayUrl, loadUrl, children } = steps[
@@ -51,8 +45,7 @@ function MiniBrowserWithRef(
       zoom={zoom}
       className={`${c("")} ${props.className || ""}`}
       style={{
-        transform: `translateX(${x}px)`,
-        opacity: o * o,
+        ...transitionStyle({ progress, transition }),
         ...props.style,
       }}
       classes={classes}
@@ -65,4 +58,24 @@ function MiniBrowserWithRef(
   )
 }
 
+function transitionStyle({
+  progress,
+  transition,
+}: {
+  progress: number
+  transition: Transition
+}) {
+  if (transition === "slide") {
+    const X = 50
+    const t = progress - Math.floor(progress)
+    const x = t <= 0.5 ? -X * t : X - X * t
+    const o = Math.abs(t - 0.5) * 2
+    return {
+      transform: `translateX(${x}px)`,
+      opacity: o * o,
+    }
+  }
+  return {}
+}
+
 export { MiniBrowserHike }

packages/scrollycoding/src/preview.tsx

@@ -34,6 +34,7 @@ function Preview({ filesHash, ...props }: PreviewProps) {
     <MiniBrowser
       url=""
       loadUrl={link}
+      transition="slide"
       {...props}
       children={preview}
     />