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

diff --git a/js/quiz.match.js b/js/quiz.match.js
index 3db6a33c5367a585bc6eab6f791fdacefa2256bd..0d7271c95db730d3b8b4ffafa93607e93ed673be 100644 (file)
--- 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 92961bfa69b7b83c34887315a39c4f9ada137715..5012bc91f0a71b01dbe32c7b47a74605ed11d582 100644 (file)
--- 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 be84b8ab1098ebe5cd6577a9fb96cd834f390c1a..455af03820a24a2dc2d0bb53eee960f58f4fd9a1 100644 (file)
--- 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 8e7a18062a09572d799a84b569f7e25a4e2e422f..52a52dd9b422d1fbf7f235353703f6a1cee3f859 100644 (file)
--- 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