From: soufiane <soufiane@cubedesigners.com>
Date: Tue, 26 Sep 2023 14:28:42 +0000 (+0200)
Subject: wip #6182 @4:00 animation question match, intro
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ff7424f89c2979124ab381deab9623090b242afe;p=fluidbook-toolbox-quiz.git

wip #6182 @4:00 animation question match, intro
---

diff --git a/js/quiz.match.js b/js/quiz.match.js
index 3db6a33..0d7271c 100644
--- a/js/quiz.match.js
+++ b/js/quiz.match.js
@@ -51,7 +51,6 @@ QuizMatch.prototype = {
         })
 
         this.initSwiperBottom()
-
     },
 
     initSwiperBottom: function() {
@@ -82,6 +81,34 @@ QuizMatch.prototype = {
                 }
             }
         })
+        this.animateContent()
+    },
+
+    animateContent: function() {
+        gsap.timeline({delay: .5}).to(".active-screen .top-slider-container", {
+            opacity: 1
+        })
+        .to(".active-screen .bottom-slider", {
+            opacity: 1
+        })
+        .to(".active-screen .bottom-slider .swiper-slide", {
+            opacity: function(index) {
+                let opacity = 1
+                if(index === 1) {
+                    opacity = 0.48
+                }else if(index === 2) {
+                    opacity = 0.24
+                }else if(index === 3) {
+                    opacity = 0
+                }
+                return opacity
+            },
+            ease: "power1.inOut",
+            stagger: .15,
+            onComplete: function() {
+                $(this.target).removeClass("not-visible")
+            }
+        })
     },
 
     setRotation: function(swiper) {
@@ -101,8 +128,12 @@ QuizMatch.prototype = {
                 $(el).css({
                     'transform':'rotate('+(angle)+'deg)',
                     'top': $this.rules[index] ? $this.rules[index].top+'px' : 0,
-                    'opacity': $this.rules[index] ? $this.rules[index].opacity : 0
                 })
+                if(!$(el).hasClass("not-visible")) {
+                    $(el).css({
+                        'opacity': $this.rules[index] ? $this.rules[index].opacity : 0
+                    })
+                }
                 if(direction === "next") {
                     angle += 4
                 } else {
diff --git a/js/quiz.screen.intro.js b/js/quiz.screen.intro.js
index 92961bf..5012bc9 100644
--- a/js/quiz.screen.intro.js
+++ b/js/quiz.screen.intro.js
@@ -28,7 +28,6 @@ QuizScreenIntro.prototype = {
             })
             .to("#start", {
                 y: 0,
-
             }, .2)
             .from(title.words, {
                 opacity: 0, y: 20, duration: .2, stagger: 0.05
@@ -48,6 +47,7 @@ QuizScreenIntro.prototype = {
         } else {
             $("#welcome p").html(this.quiz.utils.nl2br(intro_text))
         }
+        this.animate();
     },
 
 }
diff --git a/style/107-question-match.sass b/style/107-question-match.sass
index be84b8a..455af03 100644
--- a/style/107-question-match.sass
+++ b/style/107-question-match.sass
@@ -2,6 +2,7 @@
 
     .top-slider-container
         margin: 75px 0 40px
+        opacity: 0
         +flex-config(center, '','', flex-end)
         .controls
             margin: 0 24px
@@ -18,6 +19,7 @@
             text-align: center
 
     .bottom-slider
+        opacity: 0
         .swiper-slide
             width: 252px !important
             height: 158px
@@ -25,12 +27,15 @@
             padding: 15px
             transition: all .3s
             border: 2px solid transparent
+            opacity: 0
             &-active
                 background-color: $neutral-color
                 border: 2px solid $texts-color
                 transform: rotate(0) !important
                 top: 0 !important
-                opacity: 1 !important
+                &:not(.not-visible)
+                    opacity: 1 !important
+
             &-prev,
             &-next
                 +opacity(.24,background-color,$neutral-color)
diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php
index 8e7a180..52a52dd 100644
--- a/views/screens/question_match.blade.php
+++ b/views/screens/question_match.blade.php
@@ -27,7 +27,7 @@
         <div class="swiper-container bottom-slider">
             <div class="swiper-wrapper">
                 @foreach($propositions as $prop)
-                    <div class="swiper-slide">
+                    <div class="swiper-slide not-visible">
                         {{ $prop }}
                     </div>
                 @endforeach