fix(core): Change opacityString and scaleString to originalProgress (#…

…5095)

* feat(core): add originalProgress

* fix(core): use originalProgress to opacity and scale

src/core/update/updateSlidesProgress.js

@@ -4,7 +4,7 @@ export default function updateSlidesProgress(translate = (this && this.translate
   const swiper = this;
   const params = swiper.params;
 
-  const { slides, rtlTranslate: rtl } = swiper;
+  const { slides, rtlTranslate: rtl, snapGrid } = swiper;
 
   if (slides.length === 0) return;
   if (typeof slides[0].swiperSlideOffset === 'undefined') swiper.updateSlidesOffset();
@@ -28,6 +28,12 @@ export default function updateSlidesProgress(translate = (this && this.translate
     const slideProgress =
       (offsetCenter + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) /
       (slide.swiperSlideSize + params.spaceBetween);
+    const originalSlideProgress =
+      (offsetCenter -
+        snapGrid[0] +
+        (params.centeredSlides ? swiper.minTranslate() : 0) -
+        slideOffset) /
+      (slide.swiperSlideSize + params.spaceBetween);
     const slideBefore = -(offsetCenter - slideOffset);
     const slideAfter = slideBefore + swiper.slidesSizesGrid[i];
     const isVisible =
@@ -40,6 +46,7 @@ export default function updateSlidesProgress(translate = (this && this.translate
       slides.eq(i).addClass(params.slideVisibleClass);
     }
     slide.progress = rtl ? -slideProgress : slideProgress;
+    slide.originalProgress = rtl ? -originalSlideProgress : originalSlideProgress;
   }
   swiper.visibleSlides = $(swiper.visibleSlides);
 }

src/modules/effect-creative/effect-creative.js

@@ -42,6 +42,11 @@ export default function EffectCreative({ swiper, extendParams, on }) {
         Math.max($slideEl[0].progress, -params.limitProgress),
         params.limitProgress,
       );
+      const originalProgress = Math.min(
+        Math.max($slideEl[0].originalProgress, -params.limitProgress),
+        params.limitProgress,
+      );
+
       const offset = $slideEl[0].swiperSlideOffset;
       const t = [swiper.params.cssMode ? -offset - swiper.translate : -offset, 0, 0];
       const r = [0, 0, 0];
@@ -79,13 +84,13 @@ export default function EffectCreative({ swiper, extendParams, on }) {
       const translateString = t.join(', ');
       const rotateString = `rotateX(${r[0]}deg) rotateY(${r[1]}deg) rotateZ(${r[2]}deg)`;
       const scaleString =
-        progress < 0
-          ? `scale(${1 + (1 - data.scale) * progress * multiplier})`
-          : `scale(${1 - (1 - data.scale) * progress * multiplier})`;
+        originalProgress < 0
+          ? `scale(${1 + (1 - data.scale) * originalProgress * multiplier})`
+          : `scale(${1 - (1 - data.scale) * originalProgress * multiplier})`;
       const opacityString =
-        progress < 0
-          ? 1 + (1 - data.opacity) * progress * multiplier
-          : 1 - (1 - data.opacity) * progress * multiplier;
+        originalProgress < 0
+          ? 1 + (1 - data.opacity) * originalProgress * multiplier
+          : 1 - (1 - data.opacity) * originalProgress * multiplier;
       const transform = `translate3d(${translateString}) ${rotateString} ${scaleString}`;
 
       // Set shadows