Add lag to animation render

davidjerleke · May 2, 2023 · 85a6458 · 85a6458
1 parent 83e76fb
commit 85a6458
Show file tree

Hide file tree

Showing 50 changed files with 273 additions and 306 deletions.
diff --git a/...l-docs/src/components/CodeSandbox/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.jsx b/...l-docs/src/components/CodeSandbox/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.jsx
@@ -31,7 +31,7 @@ const EmblaCarousel = (props) => {
           Object.assign(newEngine[engineModule], oldEngine[engineModule])
         })
 
-        newEngine.translate.to(oldEngine.location)
+        newEngine.translate.to(oldEngine.location.value)
         const { index } = newEngine.scrollTarget.byDistance(0, false)
         newEngine.index.set(index)
         newEngine.animation.start()
@@ -48,7 +48,7 @@ const EmblaCarousel = (props) => {
       const engine = emblaApi.internalEngine()
 
       if (hasMoreToLoadRef.current && engine.dragHandler.pointerDown()) {
-        const boundsActive = engine.limit.reachedMax(engine.target.get())
+        const boundsActive = engine.limit.reachedMax(engine.target.value)
         engine.scrollBounds.toggleActive(boundsActive)
         emblaApi.on('pointerUp', reloadAfterPointerUp)
       } else {

diff --git a/...l-docs/src/components/CodeSandbox/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.tsx b/...l-docs/src/components/CodeSandbox/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.tsx
@@ -48,7 +48,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
           Object.assign(newEngine[engineModule], oldEngine[engineModule])
         })
 
-        newEngine.translate.to(oldEngine.location)
+        newEngine.translate.to(oldEngine.location.value)
         const { index } = newEngine.scrollTarget.byDistance(0, false)
         newEngine.index.set(index)
         newEngine.animation.start()
@@ -65,7 +65,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
       const engine = emblaApi.internalEngine()
 
       if (hasMoreToLoadRef.current && engine.dragHandler.pointerDown()) {
-        const boundsActive = engine.limit.reachedMax(engine.target.get())
+        const boundsActive = engine.limit.reachedMax(engine.target.value)
         engine.scrollBounds.toggleActive(boundsActive)
         emblaApi.on('pointerUp', reloadAfterPointerUp)
       } else {

diff --git a/...rc/components/CodeSandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.jsx b/...rc/components/CodeSandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.jsx
@@ -112,7 +112,7 @@ export const IosPickerItem = (props) => {
 
     emblaApi.on('pointerUp', () => {
       const { scrollTo, target, location } = emblaApi.internalEngine()
-      const diffToTarget = target.get() - location.get()
+      const diffToTarget = target.value - location.value
       const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
       const distance = diffToTarget * factor
       scrollTo.distance(distance, true)

diff --git a/...rc/components/CodeSandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.tsx b/...rc/components/CodeSandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.tsx
@@ -140,7 +140,7 @@ export const IosPickerItem: React.FC<PropType> = (props) => {
 
     emblaApi.on('pointerUp', () => {
       const { scrollTo, target, location } = emblaApi.internalEngine()
-      const diffToTarget = target.get() - location.get()
+      const diffToTarget = target.value - location.value
       const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
       const distance = diffToTarget * factor
       scrollTo.distance(distance, true)

diff --git a/...carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/Opacity/EmblaCarousel.jsx b/...carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/Opacity/EmblaCarousel.jsx
@@ -20,12 +20,11 @@ const EmblaCarousel = (props) => {
     const scrollProgress = emblaApi.scrollProgress()
 
     const styles = emblaApi.scrollSnapList().map((scrollSnap, index) => {
-      if (!emblaApi.slidesInView().includes(index)) return 0
       let diffToTarget = scrollSnap - scrollProgress
 
       if (engine.options.loop) {
         engine.slideLooper.loopPoints.forEach((loopItem) => {
-          const target = loopItem.target().get()
+          const target = loopItem.target()
           if (index === loopItem.index && target !== 0) {
             const sign = Math.sign(target)
             if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)

diff --git a/...carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/Opacity/EmblaCarousel.tsx b/...carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/Opacity/EmblaCarousel.tsx
@@ -25,12 +25,11 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     const scrollProgress = emblaApi.scrollProgress()
 
     const styles = emblaApi.scrollSnapList().map((scrollSnap, index) => {
-      if (!emblaApi.slidesInView().includes(index)) return 0
       let diffToTarget = scrollSnap - scrollProgress
 
       if (engine.options.loop) {
         engine.slideLooper.loopPoints.forEach((loopItem) => {
-          const target = loopItem.target().get()
+          const target = loopItem.target()
           if (index === loopItem.index && target !== 0) {
             const sign = Math.sign(target)
             if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)

diff --git a/...arousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/Parallax/EmblaCarousel.jsx b/...arousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/Parallax/EmblaCarousel.jsx
@@ -17,12 +17,11 @@ const EmblaCarousel = (props) => {
     const scrollProgress = emblaApi.scrollProgress()
 
     const styles = emblaApi.scrollSnapList().map((scrollSnap, index) => {
-      if (!emblaApi.slidesInView().includes(index)) return 0
       let diffToTarget = scrollSnap - scrollProgress
 
       if (engine.options.loop) {
         engine.slideLooper.loopPoints.forEach((loopItem) => {
-          const target = loopItem.target().get()
+          const target = loopItem.target()
           if (index === loopItem.index && target !== 0) {
             const sign = Math.sign(target)
             if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)
@@ -58,7 +57,7 @@ const EmblaCarousel = (props) => {
                   className="embla__parallax__layer"
                   style={{
                     ...(tweenValues.length && {
-                      transform: `translateX(${tweenValues[index]}%)`,
+                      transform: `translate3d(${tweenValues[index]}%,0px,0px)`,
                     }),
                   }}
                 >

diff --git a/...arousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/Parallax/EmblaCarousel.tsx b/...arousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/Parallax/EmblaCarousel.tsx
@@ -22,12 +22,11 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     const scrollProgress = emblaApi.scrollProgress()
 
     const styles = emblaApi.scrollSnapList().map((scrollSnap, index) => {
-      if (!emblaApi.slidesInView().includes(index)) return 0
       let diffToTarget = scrollSnap - scrollProgress
 
       if (engine.options.loop) {
         engine.slideLooper.loopPoints.forEach((loopItem) => {
-          const target = loopItem.target().get()
+          const target = loopItem.target()
           if (index === loopItem.index && target !== 0) {
             const sign = Math.sign(target)
             if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)
@@ -63,7 +62,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
                   className="embla__parallax__layer"
                   style={{
                     ...(tweenValues.length && {
-                      transform: `translateX(${tweenValues[index]}%)`,
+                      transform: `translate3d(${tweenValues[index]}%,0px,0px)`,
                     }),
                   }}
                 >

diff --git a/...a-carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/Scale/EmblaCarousel.jsx b/...a-carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/Scale/EmblaCarousel.jsx
@@ -20,12 +20,11 @@ const EmblaCarousel = (props) => {
     const scrollProgress = emblaApi.scrollProgress()
 
     const styles = emblaApi.scrollSnapList().map((scrollSnap, index) => {
-      if (!emblaApi.slidesInView().includes(index)) return 0
       let diffToTarget = scrollSnap - scrollProgress
 
       if (engine.options.loop) {
         engine.slideLooper.loopPoints.forEach((loopItem) => {
-          const target = loopItem.target().get()
+          const target = loopItem.target()
           if (index === loopItem.index && target !== 0) {
             const sign = Math.sign(target)
             if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)

diff --git a/...a-carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/Scale/EmblaCarousel.tsx b/...a-carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/Scale/EmblaCarousel.tsx
@@ -25,12 +25,11 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     const scrollProgress = emblaApi.scrollProgress()
 
     const styles = emblaApi.scrollSnapList().map((scrollSnap, index) => {
-      if (!emblaApi.slidesInView().includes(index)) return 0
       let diffToTarget = scrollSnap - scrollProgress
 
       if (engine.options.loop) {
         engine.slideLooper.loopPoints.forEach((loopItem) => {
-          const target = loopItem.target().get()
+          const target = loopItem.target()
           if (index === loopItem.index && target !== 0) {
             const sign = Math.sign(target)
             if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)

diff --git a/...el-docs/src/components/CodeSandbox/React/SandboxFilesSrc/InfiniteScroll/EmblaCarousel.tsx b/...el-docs/src/components/CodeSandbox/React/SandboxFilesSrc/InfiniteScroll/EmblaCarousel.tsx
@@ -48,7 +48,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
           Object.assign(newEngine[engineModule], oldEngine[engineModule])
         })
 
-        newEngine.translate.to(oldEngine.location)
+        newEngine.translate.to(oldEngine.location.value)
         const { index } = newEngine.scrollTarget.byDistance(0, false)
         newEngine.index.set(index)
         newEngine.animation.start()
@@ -65,7 +65,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
       const engine = emblaApi.internalEngine()
 
       if (hasMoreToLoadRef.current && engine.dragHandler.pointerDown()) {
-        const boundsActive = engine.limit.reachedMax(engine.target.get())
+        const boundsActive = engine.limit.reachedMax(engine.target.value)
         engine.scrollBounds.toggleActive(boundsActive)
         emblaApi.on('pointerUp', reloadAfterPointerUp)
       } else {

diff --git a/...src/components/CodeSandbox/React/SandboxFilesSrc/IosPicker/EmblaCarouselIosPickerItem.tsx b/...src/components/CodeSandbox/React/SandboxFilesSrc/IosPicker/EmblaCarouselIosPickerItem.tsx
@@ -140,7 +140,7 @@ export const IosPickerItem: React.FC<PropType> = (props) => {
 
     emblaApi.on('pointerUp', () => {
       const { scrollTo, target, location } = emblaApi.internalEngine()
-      const diffToTarget = target.get() - location.get()
+      const diffToTarget = target.value - location.value
       const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
       const distance = diffToTarget * factor
       scrollTo.distance(distance, true)

diff --git a/...-carousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/Opacity/EmblaCarousel.tsx b/...-carousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/Opacity/EmblaCarousel.tsx
@@ -25,12 +25,11 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     const scrollProgress = emblaApi.scrollProgress()
 
     const styles = emblaApi.scrollSnapList().map((scrollSnap, index) => {
-      if (!emblaApi.slidesInView().includes(index)) return 0
       let diffToTarget = scrollSnap - scrollProgress
 
       if (engine.options.loop) {
         engine.slideLooper.loopPoints.forEach((loopItem) => {
-          const target = loopItem.target().get()
+          const target = loopItem.target()
           if (index === loopItem.index && target !== 0) {
             const sign = Math.sign(target)
             if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)

diff --git a/...carousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/Parallax/EmblaCarousel.tsx b/...carousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/Parallax/EmblaCarousel.tsx
@@ -22,12 +22,11 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     const scrollProgress = emblaApi.scrollProgress()
 
     const styles = emblaApi.scrollSnapList().map((scrollSnap, index) => {
-      if (!emblaApi.slidesInView().includes(index)) return 0
       let diffToTarget = scrollSnap - scrollProgress
 
       if (engine.options.loop) {
         engine.slideLooper.loopPoints.forEach((loopItem) => {
-          const target = loopItem.target().get()
+          const target = loopItem.target()
           if (index === loopItem.index && target !== 0) {
             const sign = Math.sign(target)
             if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)
@@ -63,7 +62,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
                   className="embla__parallax__layer"
                   style={{
                     ...(tweenValues.length && {
-                      transform: `translateX(${tweenValues[index]}%)`,
+                      transform: `translate3d(${tweenValues[index]}%,0px,0px)`,
                     }),
                   }}
                 >

diff --git a/...la-carousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/Scale/EmblaCarousel.tsx b/...la-carousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/Scale/EmblaCarousel.tsx
@@ -25,12 +25,11 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     const scrollProgress = emblaApi.scrollProgress()
 
     const styles = emblaApi.scrollSnapList().map((scrollSnap, index) => {
-      if (!emblaApi.slidesInView().includes(index)) return 0
       let diffToTarget = scrollSnap - scrollProgress
 
       if (engine.options.loop) {
         engine.slideLooper.loopPoints.forEach((loopItem) => {
-          const target = loopItem.target().get()
+          const target = loopItem.target()
           if (index === loopItem.index && target !== 0) {
             const sign = Math.sign(target)
             if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)

diff --git a/...ocs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/InfiniteScroll/infinite-scroll.js b/...ocs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/InfiniteScroll/infinite-scroll.js
@@ -39,7 +39,7 @@ export const setupInfiniteScroll = (emblaApi, loadMoreCallback) => {
   const deactivateBounds = () => {
     if (slideCount === emblaApi.slideNodes().length - 1) return
     const engine = emblaApi.internalEngine()
-    const boundsActive = engine.limit.reachedMax(engine.target.get())
+    const boundsActive = engine.limit.reachedMax(engine.target.value)
     engine.scrollBounds.toggleActive(boundsActive)
   }
 
@@ -57,7 +57,7 @@ export const setupInfiniteScroll = (emblaApi, loadMoreCallback) => {
       Object.assign(newEngine[engineModule], oldEngine[engineModule]),
     )
 
-    newEngine.translate.to(oldEngine.location)
+    newEngine.translate.to(oldEngine.location.value)
     const { index } = newEngine.scrollTarget.byDistance(0, false)
     newEngine.index.set(index)
     newEngine.animation.start()

diff --git a/...ocs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/InfiniteScroll/infinite-scroll.ts b/...ocs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/InfiniteScroll/infinite-scroll.ts
@@ -55,7 +55,7 @@ export const setupInfiniteScroll = (
   const deactivateBounds = () => {
     if (slideCount === emblaApi.slideNodes().length - 1) return
     const engine = emblaApi.internalEngine()
-    const boundsActive = engine.limit.reachedMax(engine.target.get())
+    const boundsActive = engine.limit.reachedMax(engine.target.value)
     engine.scrollBounds.toggleActive(boundsActive)
   }
 
@@ -77,7 +77,7 @@ export const setupInfiniteScroll = (
       Object.assign(newEngine[engineModule], oldEngine[engineModule]),
     )
 
-    newEngine.translate.to(oldEngine.location)
+    newEngine.translate.to(oldEngine.location.value)
     const { index } = newEngine.scrollTarget.byDistance(0, false)
     newEngine.index.set(index)
     newEngine.animation.start()

diff --git a/...carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/IosPicker/ios-picker.js b/...carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/IosPicker/ios-picker.js
@@ -97,7 +97,7 @@ export const setupIosPicker = (iosPickerNode, options) => {
 
   emblaApi.on('pointerUp', () => {
     const { scrollTo, target, location } = emblaApi.internalEngine()
-    const diffToTarget = target.get() - location.get()
+    const diffToTarget = target.value - location.value
     const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
     const distance = diffToTarget * factor
     scrollTo.distance(distance, true)

diff --git a/...carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/IosPicker/ios-picker.ts b/...carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/IosPicker/ios-picker.ts
@@ -118,7 +118,7 @@ export const setupIosPicker = (
 
   emblaApi.on('pointerUp', () => {
     const { scrollTo, target, location } = emblaApi.internalEngine()
-    const diffToTarget = target.get() - location.get()
+    const diffToTarget = target.value - location.value
     const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
     const distance = diffToTarget * factor
     scrollTo.distance(distance, true)

diff --git a/...arousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Opacity/tween-opacity.js b/...arousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Opacity/tween-opacity.js
@@ -13,7 +13,7 @@ const calculateTweenValuesOpacity = (emblaApi) => {
 
     if (engine.options.loop) {
       engine.slideLooper.loopPoints.forEach((loopItem) => {
-        const target = loopItem.target().get()
+        const target = loopItem.target()
         if (index === loopItem.index && target !== 0) {
           const sign = Math.sign(target)
           if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)

diff --git a/...arousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Opacity/tween-opacity.ts b/...arousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Opacity/tween-opacity.ts
@@ -15,7 +15,7 @@ const calculateTweenValuesOpacity = (emblaApi: EmblaCarouselType): number[] => {
 
     if (engine.options.loop) {
       engine.slideLooper.loopPoints.forEach((loopItem) => {
-        const target = loopItem.target().get()
+        const target = loopItem.target()
         if (index === loopItem.index && target !== 0) {
           const sign = Math.sign(target)
           if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)

diff --git a/...ousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Parallax/tween-parallax.js b/...ousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Parallax/tween-parallax.js
@@ -10,7 +10,7 @@ const calculateTweenValuesParallax = (emblaApi) => {
 
     if (engine.options.loop) {
       engine.slideLooper.loopPoints.forEach((loopItem) => {
-        const target = loopItem.target().get()
+        const target = loopItem.target()
         if (index === loopItem.index && target !== 0) {
           const sign = Math.sign(target)
           if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)

diff --git a/...ousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Parallax/tween-parallax.ts b/...ousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Parallax/tween-parallax.ts
@@ -14,7 +14,7 @@ const calculateTweenValuesParallax = (
 
     if (engine.options.loop) {
       engine.slideLooper.loopPoints.forEach((loopItem) => {
-        const target = loopItem.target().get()
+        const target = loopItem.target()
         if (index === loopItem.index && target !== 0) {
           const sign = Math.sign(target)
           if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)

diff --git a/...la-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Scale/tween-scale.js b/...la-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Scale/tween-scale.js
@@ -13,7 +13,7 @@ const calculateTweenValuesScale = (emblaApi) => {
 
     if (engine.options.loop) {
       engine.slideLooper.loopPoints.forEach((loopItem) => {
-        const target = loopItem.target().get()
+        const target = loopItem.target()
         if (index === loopItem.index && target !== 0) {
           const sign = Math.sign(target)
           if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)

diff --git a/...la-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Scale/tween-scale.ts b/...la-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Scale/tween-scale.ts
@@ -15,7 +15,7 @@ const calculateTweenValuesScale = (emblaApi: EmblaCarouselType): number[] => {
 
     if (engine.options.loop) {
       engine.slideLooper.loopPoints.forEach((loopItem) => {
-        const target = loopItem.target().get()
+        const target = loopItem.target()
         if (index === loopItem.index && target !== 0) {
           const sign = Math.sign(target)
           if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)

diff --git a/...docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/InfiniteScroll/infinite-scroll.ts b/...docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/InfiniteScroll/infinite-scroll.ts
@@ -55,7 +55,7 @@ export const setupInfiniteScroll = (
   const deactivateBounds = () => {
     if (slideCount === emblaApi.slideNodes().length - 1) return
     const engine = emblaApi.internalEngine()
-    const boundsActive = engine.limit.reachedMax(engine.target.get())
+    const boundsActive = engine.limit.reachedMax(engine.target.value)
     engine.scrollBounds.toggleActive(boundsActive)
   }
 
@@ -77,7 +77,7 @@ export const setupInfiniteScroll = (
       Object.assign(newEngine[engineModule], oldEngine[engineModule]),
     )
 
-    newEngine.translate.to(oldEngine.location)
+    newEngine.translate.to(oldEngine.location.value)
     const { index } = newEngine.scrollTarget.byDistance(0, false)
     newEngine.index.set(index)
     newEngine.animation.start()

diff --git a/...-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/IosPicker/ios-picker.ts b/...-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/IosPicker/ios-picker.ts
@@ -118,7 +118,7 @@ export const setupIosPicker = (
 
   emblaApi.on('pointerUp', () => {
     const { scrollTo, target, location } = emblaApi.internalEngine()
-    const diffToTarget = target.get() - location.get()
+    const diffToTarget = target.value - location.value
     const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
     const distance = diffToTarget * factor
     scrollTo.distance(distance, true)

diff --git a/...carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/Opacity/tween-opacity.ts b/...carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/Opacity/tween-opacity.ts
@@ -15,7 +15,7 @@ const calculateTweenValuesOpacity = (emblaApi: EmblaCarouselType): number[] => {
 
     if (engine.options.loop) {
       engine.slideLooper.loopPoints.forEach((loopItem) => {
-        const target = loopItem.target().get()
+        const target = loopItem.target()
         if (index === loopItem.index && target !== 0) {
           const sign = Math.sign(target)
           if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)

diff --git a/...rousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/Parallax/tween-parallax.ts b/...rousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/Parallax/tween-parallax.ts
@@ -14,7 +14,7 @@ const calculateTweenValuesParallax = (
 
     if (engine.options.loop) {
       engine.slideLooper.loopPoints.forEach((loopItem) => {
-        const target = loopItem.target().get()
+        const target = loopItem.target()
         if (index === loopItem.index && target !== 0) {
           const sign = Math.sign(target)
           if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)

diff --git a/...bla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/Scale/tween-scale.ts b/...bla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/Scale/tween-scale.ts
@@ -15,7 +15,7 @@ const calculateTweenValuesScale = (emblaApi: EmblaCarouselType): number[] => {
 
     if (engine.options.loop) {
       engine.slideLooper.loopPoints.forEach((loopItem) => {
-        const target = loopItem.target().get()
+        const target = loopItem.target()
         if (index === loopItem.index && target !== 0) {
           const sign = Math.sign(target)
           if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress)