From: soufiane <soufiane@cubedesigners.com>
Date: Thu, 28 Sep 2023 10:22:40 +0000 (+0200)
Subject: wait #6314 @1:30
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=7188667a841ae9548b5953138021b9851138972e;p=fluidbook-toolbox-quiz.git

wait #6314 @1:30
---

diff --git a/js/quiz.match.js b/js/quiz.match.js
index ca213d6..b144274 100644
--- a/js/quiz.match.js
+++ b/js/quiz.match.js
@@ -34,6 +34,7 @@ QuizMatch.prototype = {
         this.swiperBottomEl = this.quiz.screens.getActiveScreen().find(".bottom-slider")
         this.sliderBottomHtml = this.swiperBottomEl.html()
         this.swiperTopEl = this.quiz.screens.getActiveScreen().find(".top-slider");
+        this.timeline = false
 
         this.swiperTop = new Swiper(this.swiperTopEl.get(0), {
             modules: [Navigation, Pagination],
@@ -82,20 +83,45 @@ QuizMatch.prototype = {
     },
 
     animateContent: function() {
-        gsap.timeline({delay: .5}).to(".active-screen .top-slider-container", {
+        let slidesNext = this.swiperBottomEl.find(".swiper-slide-active").nextAll()
+        let slidesPrev = this.swiperBottomEl.find(".swiper-slide-active").prevAll()
+        let slideActive = this.swiperBottomEl.find(".swiper-slide-active")
+        const rules = {
+            opacity: function(index) {
+                let opacity = 0
+                if(index === 0) {
+                    opacity = 0.8
+                }else if(index === 1) {
+                    opacity = 0.6
+                }else if(index === 2) {
+                    opacity = 0.4
+                }
+                return opacity
+            },
+            ease: "power1.inOut",
+            stagger: .15,
+            onComplete: function() {
+                $(this.target).removeClass("not-visible")
+            }
+        }
+        this.timeline = gsap.timeline({delay: .5})
+
+        this.timeline.to(".active-screen .top-slider-container", {
             opacity: 1
         })
-            .to(".active-screen .bottom-slider", {
-                opacity: 1
-            })
-            .to(".active-screen .bottom-slider .swiper-slide", {
-                opacity: 1,
-                ease: "power1.inOut",
-                stagger: .15,
-                onComplete: function() {
-                    $(this.target).removeClass("not-visible")
-                }
-            })
+        .to(".active-screen .bottom-slider", {
+            opacity: 1
+        })
+        .to(slideActive, {
+            opacity: 1
+        })
+        .to(slidesNext, {
+            ...rules
+        })
+        .to(slidesPrev, {
+            ...rules
+        }, "<")
+
     },
 
     setRotation: function (swiper) {
@@ -122,7 +148,12 @@ QuizMatch.prototype = {
         let top = tops[floorpos];
         top += (abspos - floorpos) * (tops[ceilpos] - tops[floorpos]);
 
-        $(slide).css({transform: 'rotate(' + angle + 'deg) translateY(' + top + 'px)', opacity: opacity});
+        $(slide).css({transform: 'rotate(' + angle + 'deg) translateY(' + top + 'px)'});
+        if (this.timeline) {
+            if (this.timeline.progress() > 0) {
+                $(slide).css('opacity',opacity)
+            }
+        }
     },
 
     confirmTheMatch: function () {
diff --git a/style/107-question-match.sass b/style/107-question-match.sass
index c8e0d18..1c7eb37 100644
--- a/style/107-question-match.sass
+++ b/style/107-question-match.sass
@@ -35,11 +35,11 @@
             border: 2px solid transparent
             transform-origin: 50% 50%
             +opacity(.24, background-color, $neutral-color)
+            opacity: 0
 
             &.move-transitions
                 transition: background-color $transition-time, border $transition-time, opacity $transition-time, transform $transition-time
 
-            opacity: 0
             &-active
                 background-color: $neutral-color
                 border: 2px solid $texts-color