Add interpolation to AutoScroll.

davidjerleke · Jul 18, 2024 · 2c0c528 · 2c0c528
1 parent 6ed3a51
commit 2c0c528
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts b/packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts
@@ -148,6 +148,8 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
   function createAutoScrollBehaviour(engine: EngineType): ScrollBodyType {
     const {
       location,
+      previousLocation,
+      offsetLocation,
       target,
       scrollTarget,
       index,
@@ -158,20 +160,21 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
     const directionSign = options.direction === 'forward' ? -1 : 1
     const noop = (): ScrollBodyType => self
 
-    // TODO: Make it work with interpolation
-
     let bodyVelocity = 0
     let scrollDirection = 0
     let rawLocation = location.get()
     let rawLocationPrevious = 0
     let hasSettled = false
 
-    function seek(): ScrollBodyType {
+    function seek(timeStep: number): ScrollBodyType {
+      const fixedDeltaTimeSeconds = timeStep / 1000
       let directionDiff = 0
 
-      bodyVelocity = directionSign * options.speed
+      previousLocation.set(location)
+
+      bodyVelocity = directionSign * options.speed * 55
       rawLocation += bodyVelocity
-      location.add(bodyVelocity)
+      location.add(bodyVelocity * fixedDeltaTimeSeconds)
       target.set(location)
 
       directionDiff = rawLocation - rawLocationPrevious
@@ -188,8 +191,8 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
 
       const reachedEnd =
         options.direction === 'forward'
-          ? reachedMin(location.get())
-          : reachedMax(location.get())
+          ? reachedMin(offsetLocation.get())
+          : reachedMax(offsetLocation.get())
 
       if (!loop && reachedEnd) {
         hasSettled = true

diff --git a/packages/embla-carousel/src/components/Engine.ts b/packages/embla-carousel/src/components/Engine.ts
@@ -50,6 +50,7 @@ export type EngineType = {
   limit: LimitType
   location: Vector1DType
   offsetLocation: Vector1DType
+  previousLocation: Vector1DType
   options: OptionsType
   percentOfView: PercentOfViewType
   scrollBody: ScrollBodyType
@@ -190,7 +191,7 @@ export function Engine(
     if (!hasSettled) eventHandler.emit('scroll')
 
     const interpolatedLocation =
-      location.get() * lagOffset + prevLocation.get() * (1 - lagOffset)
+      location.get() * lagOffset + previousLocation.get() * (1 - lagOffset)
 
     offsetLocation.set(interpolatedLocation)
 
@@ -212,13 +213,13 @@ export function Engine(
   const friction = 0.68
   const startLocation = scrollSnaps[index.get()]
   const location = Vector1D(startLocation)
-  const prevLocation = Vector1D(startLocation)
+  const previousLocation = Vector1D(startLocation)
   const offsetLocation = Vector1D(startLocation)
   const target = Vector1D(startLocation)
   const scrollBody = ScrollBody(
     location,
     offsetLocation,
-    prevLocation,
+    previousLocation,
     target,
     duration,
     friction
@@ -302,6 +303,7 @@ export function Engine(
     limit,
     location,
     offsetLocation,
+    previousLocation,
     options,
     resizeHandler: ResizeHandler(
       container,
@@ -323,7 +325,7 @@ export function Engine(
     scrollLooper: ScrollLooper(contentSize, limit, offsetLocation, [
       location,
       offsetLocation,
-      prevLocation,
+      previousLocation,
       target
     ]),
     scrollProgress,

diff --git a/packages/embla-carousel/src/components/ScrollBody.ts b/packages/embla-carousel/src/components/ScrollBody.ts
@@ -16,7 +16,7 @@ export type ScrollBodyType = {
 export function ScrollBody(
   location: Vector1DType,
   offsetLocation: Vector1DType,
-  prevLocation: Vector1DType,
+  previousLocation: Vector1DType,
   target: Vector1DType,
   baseDuration: number,
   baseFriction: number
@@ -30,19 +30,19 @@ export function ScrollBody(
 
   function seek(timeStep: number): ScrollBodyType {
     const fixedDeltaTimeSeconds = timeStep / 1000
-    const duration = scrollDuration * 0.016
+    const duration = scrollDuration * fixedDeltaTimeSeconds
     const diff = target.get() - location.get()
     const isInstant = !scrollDuration
     let directionDiff = 0
 
     if (isInstant) {
       bodyVelocity = 0
-      prevLocation.set(target)
+      previousLocation.set(target)
       location.set(target)
 
       directionDiff = diff
     } else {
-      prevLocation.set(location)
+      previousLocation.set(location)
 
       bodyVelocity += diff / duration
       bodyVelocity *= scrollFriction