[Bug]: Add interpolation to fixed time step to improve animation smoothness

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,
@@ -164,12 +166,15 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
     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
@@ -186,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

packages/embla-carousel-docs/src/components/Examples/examplesCarouselStyles.ts

@@ -144,6 +144,7 @@ export const SLIDE_NUMBER_STYLES = css`
     align-items: center;
     justify-content: center;
     height: __replace_slide_height__;
+    user-select: none;
   }
 `
 

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.jsx

@@ -30,7 +30,13 @@ const EmblaCarousel = (props) => {
 
         emblaApi.reInit()
         const newEngine = emblaApi.internalEngine()
-        const copyEngineModules = ['location', 'target', 'scrollBody']
+        const copyEngineModules = [
+          'scrollBody',
+          'location',
+          'offsetLocation',
+          'previousLocation',
+          'target'
+        ]
         copyEngineModules.forEach((engineModule) => {
           Object.assign(newEngine[engineModule], oldEngine[engineModule])
         })

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.tsx

@@ -42,9 +42,11 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
         emblaApi.reInit()
         const newEngine = emblaApi.internalEngine()
         const copyEngineModules: (keyof EngineType)[] = [
+          'scrollBody',
           'location',
-          'target',
-          'scrollBody'
+          'offsetLocation',
+          'previousLocation',
+          'target'
         ]
         copyEngineModules.forEach((engineModule) => {
           Object.assign(newEngine[engineModule], oldEngine[engineModule])

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/InfiniteScroll/EmblaCarousel.tsx

@@ -42,9 +42,11 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
         emblaApi.reInit()
         const newEngine = emblaApi.internalEngine()
         const copyEngineModules: (keyof EngineType)[] = [
+          'scrollBody',
           'location',
-          'target',
-          'scrollBody'
+          'offsetLocation',
+          'previousLocation',
+          'target'
         ]
         copyEngineModules.forEach((engineModule) => {
           Object.assign(newEngine[engineModule], oldEngine[engineModule])

packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarouselInfiniteScroll.js

@@ -47,7 +47,13 @@ export const setupInfiniteScroll = (emblaApi, loadMoreCallback) => {
 
     emblaApi.reInit()
     const newEngine = emblaApi.internalEngine()
-    const copyEngineModules = ['scrollBody', 'location', 'target']
+    const copyEngineModules = [
+      'scrollBody',
+      'location',
+      'offsetLocation',
+      'previousLocation',
+      'target'
+    ]
     copyEngineModules.forEach((engineModule) =>
       Object.assign(newEngine[engineModule], oldEngine[engineModule])
     )

packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarouselInfiniteScroll.ts

@@ -66,6 +66,8 @@ export const setupInfiniteScroll = (
     const copyEngineModules: (keyof EngineType)[] = [
       'scrollBody',
       'location',
+      'offsetLocation',
+      'previousLocation',
       'target'
     ]
     copyEngineModules.forEach((engineModule) =>

packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/InfiniteScroll/EmblaCarouselInfiniteScroll.ts

@@ -66,6 +66,8 @@ export const setupInfiniteScroll = (
     const copyEngineModules: (keyof EngineType)[] = [
       'scrollBody',
       'location',
+      'offsetLocation',
+      'previousLocation',
       'target'
     ]
     copyEngineModules.forEach((engineModule) =>

packages/embla-carousel-docs/src/content/pages/api/events.mdx

@@ -394,7 +394,7 @@ export function EmblaCarousel() {
     console.log(`Embla just triggered ${eventName}!`)
   }
 
-  function onInit(event): void {
+  function onInit(event: CustomEvent<EmblaCarouselType>): void {
     emblaApi = event.detail
     emblaApi.on('slidesInView', logEmblaEvent)
   }

packages/embla-carousel-docs/src/content/pages/api/methods.mdx

@@ -239,7 +239,7 @@ export function EmblaCarousel() {
     console.log(emblaApi.slidesInView())
   }
 
-  function onInit(event): void {
+  function onInit(event: CustomEvent<EmblaCarouselType>): void {
     emblaApi = event.detail
     emblaApi.on('slidesInView', logSlidesInView)
   }

packages/embla-carousel-fade/src/components/Fade.ts

@@ -20,6 +20,7 @@ function Fade(userOptions: FadeOptionsType = {}): FadeType {
   const fullOpacity = 1
   const noOpacity = 0
   const fadeFriction = 0.68
+  const timeStep = 1000 / 60
 
   let emblaApi: EmblaCarouselType
   let opacities: number[] = []
@@ -28,6 +29,7 @@ function Fade(userOptions: FadeOptionsType = {}): FadeType {
   let fadeVelocity = 0
   let progress = 0
   let shouldFadePair = false
+
   let defaultSettledBehaviour: ScrollBodyType['settled']
   let defaultProgressBehaviour: EmblaCarouselType['scrollProgress']
 
@@ -214,10 +216,11 @@ function Fade(userOptions: FadeOptionsType = {}): FadeType {
     return distanceSign === directionSign ? nextSnap : selectedSnap
   }
 
-  const fade = (emblaApi: EmblaCarouselType): void => {
+  function fade(emblaApi: EmblaCarouselType): void {
     const { dragHandler, scrollBody } = emblaApi.internalEngine()
+    const fixedDeltaTimeSeconds = timeStep / 1000
     const pointerDown = dragHandler.pointerDown()
-    const velocity = scrollBody.velocity()
+    const velocity = scrollBody.velocity() * fixedDeltaTimeSeconds
     const duration = scrollBody.duration()
     const fadeIndex = getFadeIndex()
     const noFadeIndex = !isNumber(fadeIndex)

packages/embla-carousel/src/__tests__/loop-ltr.test.ts

@@ -13,6 +13,7 @@ export const scrollToLocationInstant = (
   engine.target.set(location)
   engine.scrollBody.useDuration(0)
   engine.animation.update()
+  engine.animation.render(1)
 }
 
 describe('➡️  Loop - Horizontal LTR', () => {

packages/embla-carousel/src/__tests__/scrollBounds-ltr.test.ts

@@ -7,6 +7,7 @@ export const setLocationOutOfBounds = (
   engine: EngineType,
   outOfBoundsLocation: number
 ): void => {
+  engine.offsetLocation.set(outOfBoundsLocation)
   engine.location.set(outOfBoundsLocation)
   engine.target.set(outOfBoundsLocation)
 }
@@ -21,7 +22,7 @@ describe('➡️  ScrollBounds - Horizontal LTR', () => {
       emblaApi.on('settle', settleCallback)
 
       setLocationOutOfBounds(engine, engine.limit.max + 1)
-      engine.animation.update()
+      engine.animation.render(1)
 
       expect(settleCallback).toHaveBeenCalledTimes(0)
     })
@@ -46,7 +47,7 @@ describe('➡️  ScrollBounds - Horizontal LTR', () => {
       emblaApi.on('settle', settleCallback)
 
       setLocationOutOfBounds(engine, engine.limit.min - 1)
-      engine.animation.update()
+      engine.animation.render(1)
 
       expect(settleCallback).toHaveBeenCalledTimes(0)
     })

packages/embla-carousel/src/__tests__/scrollBounds-rtl.test.ts

@@ -7,6 +7,7 @@ export const setLocationOutOfBounds = (
   engine: EngineType,
   outOfBoundsLocation: number
 ): void => {
+  engine.offsetLocation.set(outOfBoundsLocation)
   engine.location.set(outOfBoundsLocation)
   engine.target.set(outOfBoundsLocation)
 }
@@ -23,7 +24,7 @@ describe('➡️  ScrollBounds - Horizontal RTL', () => {
       emblaApi.on('settle', settleCallback)
 
       setLocationOutOfBounds(engine, engine.limit.max + 1)
-      engine.animation.update()
+      engine.animation.render(1)
 
       expect(settleCallback).toHaveBeenCalledTimes(0)
     })
@@ -52,7 +53,7 @@ describe('➡️  ScrollBounds - Horizontal RTL', () => {
       emblaApi.on('settle', settleCallback)
 
       setLocationOutOfBounds(engine, engine.limit.min - 1)
-      engine.animation.update()
+      engine.animation.render(1)
 
       expect(settleCallback).toHaveBeenCalledTimes(0)
     })

packages/embla-carousel/src/__tests__/scrollBounds-vertical.test.ts

@@ -7,6 +7,7 @@ export const setLocationOutOfBounds = (
   engine: EngineType,
   outOfBoundsLocation: number
 ): void => {
+  engine.offsetLocation.set(outOfBoundsLocation)
   engine.location.set(outOfBoundsLocation)
   engine.target.set(outOfBoundsLocation)
 }
@@ -23,7 +24,7 @@ describe('➡️  ScrollBounds - Vertical', () => {
       emblaApi.on('settle', settleCallback)
 
       setLocationOutOfBounds(engine, engine.limit.max + 1)
-      engine.animation.update()
+      engine.animation.render(1)
 
       expect(settleCallback).toHaveBeenCalledTimes(0)
     })
@@ -52,7 +53,7 @@ describe('➡️  ScrollBounds - Vertical', () => {
       emblaApi.on('settle', settleCallback)
 
       setLocationOutOfBounds(engine, engine.limit.min - 1)
-      engine.animation.update()
+      engine.animation.render(1)
 
       expect(settleCallback).toHaveBeenCalledTimes(0)
     })

packages/embla-carousel/src/components/Animations.ts

@@ -2,26 +2,35 @@ import { EngineType } from './Engine'
 import { EventStore } from './EventStore'
 import { WindowType } from './utils'
 
-export type AnimationsUpdateType = (engine: EngineType) => void
+export type AnimationsUpdateType = (
+  engine: EngineType,
+  timeStep: number
+) => void
+export type AnimationsRenderType = (
+  engine: EngineType,
+  lagOffset: number
+) => void
 
 export type AnimationsType = {
   init: () => void
   destroy: () => void
   start: () => void
   stop: () => void
   update: () => void
+  render: (lagOffset: number) => void
 }
 
 export function Animations(
   ownerDocument: Document,
   ownerWindow: WindowType,
-  update: AnimationsType['update']
+  update: (timeStep: number) => void,
+  render: (lagOffset: number) => void
 ): AnimationsType {
   const documentVisibleHandler = EventStore()
   const timeStep = 1000 / 60
   let lastTimeStamp: number | null = null
-  let animationFrame = 0
   let lag = 0
+  let animationFrame = 0
 
   function init(): void {
     documentVisibleHandler.add(ownerDocument, 'visibilitychange', () => {
@@ -38,15 +47,18 @@ export function Animations(
     if (!animationFrame) return
     if (!lastTimeStamp) lastTimeStamp = timeStamp
 
-    const timeElapsed = timeStamp - lastTimeStamp
+    const elapsed = timeStamp - lastTimeStamp
     lastTimeStamp = timeStamp
-    lag += timeElapsed
+    lag += elapsed
 
     while (lag >= timeStep) {
-      update()
+      update(timeStep)
       lag -= timeStep
     }
 
+    const lagOffset = lag / timeStep
+    render(lagOffset)
+
     if (animationFrame) ownerWindow.requestAnimationFrame(animate)
   }
 
@@ -73,7 +85,8 @@ export function Animations(
     destroy,
     start,
     stop,
-    update
+    update: () => update(timeStep),
+    render
   }
   return self
 }