diff --git a/packages/mini-editor/src/code.tsx b/packages/mini-editor/src/code.tsx index 832b2cbb..07c5c51f 100644 --- a/packages/mini-editor/src/code.tsx +++ b/packages/mini-editor/src/code.tsx @@ -59,7 +59,10 @@ export function Code({ 
       
         {dimensions ? (
diff --git a/packages/smooth-lines/src/index.tsx b/packages/smooth-lines/src/index.tsx
index da625956..dfee0824 100644
--- a/packages/smooth-lines/src/index.tsx
+++ b/packages/smooth-lines/src/index.tsx
@@ -38,7 +38,10 @@ function SmoothLines({
   minZoom = 0,
   maxZoom = 1.2,
 }: Props) {
-  const lines = useLineTransitions(prevLines, nextLines)
+  const { lines, verticalInterval } = useLineTransitions(
+    prevLines,
+    nextLines
+  )
 
   const prevFocusKeys = prevFocus.map(
     index => prevLines[index]?.key
@@ -88,7 +91,13 @@ function SmoothLines({
 
   const zoom = tweenProp(prevZoom, nextZoom, progress)
   const dx = tweenProp(prevDX, nextDX, progress)
-  const dy = tweenProp(prevDY, nextDY, progress)
+  const dy = tweenProp(
+    prevDY,
+    nextDY,
+    progress,
+    verticalInterval
+  )
+
   const focusHeight = tweenProp(
     prevContentHeight,
     nextContentHeight,
@@ -264,12 +273,13 @@ function Content({
 function tweenProp(
   start: number,
   end: number,
-  progress: number
+  progress: number,
+  interval: [number, number] = [0, 1]
 ) {
   return tween(
     {
       fixed: false,
-      interval: [0, 1],
+      interval,
       extremes: [start, end],
       ease: easing.easeInOutCubic,
     },
diff --git a/packages/smooth-lines/src/line-transitions.ts b/packages/smooth-lines/src/line-transitions.ts
index d39b5cfa..82a91079 100644
--- a/packages/smooth-lines/src/line-transitions.ts
+++ b/packages/smooth-lines/src/line-transitions.ts
@@ -80,9 +80,15 @@ function getLineTransitions(
   const enterCount = enterIndex
   const exitCount = exitIndex
 
-  return linesData.map(lineData =>
-    getLineTransition(lineData, enterCount, exitCount)
-  )
+  return {
+    lines: linesData.map(lineData =>
+      getLineTransition(lineData, enterCount, exitCount)
+    ),
+    verticalInterval: verticalInterval(
+      enterCount,
+      exitCount
+    ),
+  }
 }
 
 function getLineTransition(
@@ -153,6 +159,7 @@ function getLineTransition(
       fixed: false,
       extremes: [prevIndex, nextIndex],
       interval: [startY, endY],
+      ease: easing.easeInOutCubic,
     },
     tweenX: { fixed: true, value: 0 },
   }
@@ -165,7 +172,7 @@ function sortUniqueConcat(a: number[], b: number[]) {
 function verticalInterval(
   enterCount: number,
   exitCount: number
-) {
+): [number, number] {
   if (enterCount <= 0 && exitCount <= 0) return [0, 1]
   if (enterCount <= 0 && exitCount >= 1) return [0.33, 1]
   if (enterCount >= 1 && exitCount <= 0) return [0, 0.67]
diff --git a/packages/storybook/src/mini-editor-hike.story.js b/packages/storybook/src/mini-editor-hike.story.js
index de555971..b45609d0 100644
--- a/packages/storybook/src/mini-editor-hike.story.js
+++ b/packages/storybook/src/mini-editor-hike.story.js
@@ -349,6 +349,7 @@ export const x = () => {
           {...xprops}
           progress={progress}
           backward={backward}
+          minColumns={50}
         />
       )}
     
@@ -358,20 +359,70 @@ export const x = () => {
 const xprops = {
   steps: [
     {
-      code:
-        "\n  \n    \n    
Lorem ipsum dolor sit amet
\n  \n\n",
+      code: `const app = 
Hello World

+
+ReactDOM.render(app, document.getElementById('root'))`,
+      focus: "1",
     },
     {
-      code:
-        "\n  \n    \n    
Lorem ipsum dolor sit amet
\n  \n\n",
-      focus: "4,8,9",
+      code: `function MyComponent() {
+  return (
+    

+      
+      
+      
+      
+      
+    

+  )
+}
+
+const app = 
Hello World

+
+ReactDOM.render(app, document.getElementById('root'))`,
+      focus: "1:7",
     },
     {
-      code:
-        "\n  \n    \n    
Lorem ipsum dolor sit amet
\n  \n\n",
-      focus: "4,8:11",
+      code: `function MyComponent() {
+  return (
+    

+      
+      
+      
+      
+      
+    

+  )
+}
+
+const app = 
Hello World

+
+ReactDOM.render(app, document.getElementById('root'))`,
+      focus: "1:7",
+    },
+    {
+      code: `function MyComponent() {
+  return (
+    

+      
+      
+      
+    

+  )
+}
+
+const app = 
Hello World

+
+ReactDOM.render(app, document.getElementById('root'))`,
+      focus: "7",
+    },
+    {
+      code: `const app = 
Hello World

+
+ReactDOM.render(app, document.getElementById('root'))`,
+      focus: "1",
     },
   ],
-  lang: "html",
-  file: "index.html",
+  lang: "jsx",
+  file: "index.js",
 }