feat(effect-creative): add progressMultipler option

nolimits4web · Aug 18, 2021 · ed3bd7a · ed3bd7a
1 parent 6345b81
commit ed3bd7a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/modules/effect-creative/effect-creative.js b/src/modules/effect-creative/effect-creative.js
@@ -8,6 +8,7 @@ export default function EffectCreative({ swiper, extendParams, on }) {
     creativeEffect: {
       transformEl: null,
       limitProgress: 1,
+      progressMultiplier: 1,
       perspective: true,
       prev: {
         translate: [0, 0, 0],
@@ -32,6 +33,7 @@ export default function EffectCreative({ swiper, extendParams, on }) {
   const setTranslate = () => {
     const { slides } = swiper;
     const params = swiper.params.creativeEffect;
+    const { progressMultiplier: multiplier } = params;
     for (let i = 0; i < slides.length; i += 1) {
       const $slideEl = slides.eq(i);
       const slideProgress = $slideEl[0].progress;
@@ -63,12 +65,12 @@ export default function EffectCreative({ swiper, extendParams, on }) {
       // set translate
       t.forEach((value, index) => {
         t[index] = `calc(${value}px + (${getTranslateValue(data.translate[index])} * ${Math.abs(
-          progress,
+          progress * multiplier,
         )}))`;
       });
       // set rotates
       r.forEach((value, index) => {
-        r[index] = data.rotate[index] * Math.abs(progress);
+        r[index] = data.rotate[index] * Math.abs(progress * multiplier);
       });
 
       $slideEl[0].style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
@@ -77,10 +79,12 @@ export default function EffectCreative({ swiper, extendParams, on }) {
       const rotateString = `rotateX(${r[0]}deg) rotateY(${r[1]}deg) rotateZ(${r[2]}deg)`;
       const scaleString =
         progress < 0
-          ? `scale(${1 + (1 - data.scale) * progress})`
-          : `scale(${1 - (1 - data.scale) * progress})`;
+          ? `scale(${1 + (1 - data.scale) * progress * multiplier})`
+          : `scale(${1 - (1 - data.scale) * progress * multiplier})`;
       const opacityString =
-        progress < 0 ? 1 + (1 - data.opacity) * progress : 1 - (1 - data.opacity) * progress;
+        progress < 0
+          ? 1 + (1 - data.opacity) * progress * multiplier
+          : 1 - (1 - data.opacity) * progress * multiplier;
       const transform = `translate3d(${translateString}) ${rotateString} ${scaleString}`;
 
       // Set shadows

diff --git a/src/types/modules/effect-creative.d.ts b/src/types/modules/effect-creative.d.ts
@@ -72,6 +72,12 @@ export interface CreativeEffectOptions {
    * @default 1
    */
   limitProgress?: number;
+  /**
+   * Allows to multiply slides transformations and opacity.
+   *
+   * @default 1
+   */
+  progressMultipler?: number;
   /**
    * Enable this parameter if your custom transforms require 3D transformations (`translateZ`, `rotateX`, `rotateY` )
    *