wip #6194 @4:00 animation module 1, apparition des modules

diff --git a/js/quiz.animations.js b/js/quiz.animations.js
index 339de781ab1407f35d49d0fa21eae00941fe0da0..1b101682651ee67b8ed0666735ebdbee9683699e 100644 (file)
--- a/js/quiz.animations.js
+++ b/js/quiz.animations.js
@@ -62,14 +62,6 @@ QuizAnimations.prototype = {
             }, 500);
         }
     },
-
-    triggeredBtn: function () {
-        /*$(document).on("mousedown", ".btn", function() {
-            gsap.to($(this), { scale: .9, duration: 0.3 });
-        }).on("mouseup", ".btn", function() {
-            gsap.to($(this), { scale: 1, duration: 0.3 });
-        })*/
-    }
 }
 
 

diff --git a/js/quiz.countdown.js b/js/quiz.countdown.js
deleted file mode 100644 (file)
index d5864f0..0000000
--- a/js/quiz.countdown.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import QuizQuestion from "./quiz.question";
-
-function QuizCountdown(quiz) {
-    this.quiz = quiz;
-    this.question = new QuizQuestion()
-    this.intervalCountDown = false
-}
-
-QuizCountdown.prototype = {
-
-}
-
-export default QuizCountdown;

diff --git a/js/quiz.js b/js/quiz.js
index 5ed1d1ed544f0975022336cfa20b0fd56380b5de..2e3e89a018daba98837c456bc58c97e5125669f7 100644 (file)
--- a/js/quiz.js
+++ b/js/quiz.js
@@ -17,7 +17,6 @@ window.cubeSCORM = new CubeSCORM();
 window.$ = window.jQuery = $;
 
 import ResizeObserver from 'resize-observer-polyfill';
-import QuizCountdown from "./quiz.countdown";
 
 window.ResizeObserver = ResizeObserver;
 

diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index 570068bbd3334bd0979687917f6cc2fbae0f700f..83d5055d06ba9b3653cd2c9740c295c01baf0e71 100644 (file)
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -136,17 +136,40 @@ QuizScreens.prototype = {
                 callback();
             }
             $this.activeScreen = screenToShow;
+
+            gsap.timeline().to(screenToShow, {
+                autoAlpha: 1
+            })
+            .to(".active-screen .header-question *", {
+                opacity: 1,
+                duration: .5
+            })
+            .to(".active-screen .list-item", {
+                opacity: 1,
+                ease: "power1.inOut",
+                stagger: .15
+            }, .7)
+            .to(".active-screen .footer-question", {
+                y: 0,
+                duration: 1,
+                opacity: 1,
+                ease: "circ.out",
+                onComplete: function () {
+                    // if countdown enable
+                    if($this.quiz.question.current() !== undefined) {
+                        if (parseInt($this.quiz.question.current().countdown_enable)) {
+                            $this.countdown()
+                        }
+                    }
+                }
+            }, 1.2)
+
             // Reset form to prevent browser letting a option selected after a refresh
             $this.resetForm();
             $this.currentQuestionAnswers = [];
             $this.quiz.progressbar.update();
 
-            // if countdown enable
-            if($this.quiz.question.current() !== undefined) {
-                if (parseInt($this.quiz.question.current().countdown_enable)) {
-                    $this.countdown()
-                }
-            }
+
 
             if (screen === 'outro') {
                 $this.outro.show();

diff --git a/style/100-global.sass b/style/100-global.sass
index 5df6b53abb577c079e3ec8f7d997639f8b5e05aa..3eafac5829f66059935208676727b9d20049f166 100644 (file)
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -19,6 +19,7 @@ body
     margin: 0 auto
     +padding-container()
     position: relative
+    overflow: hidden
 
 .btn
     padding: 0 12px
@@ -43,7 +44,7 @@ body
                 position: absolute
                 right: 0
                 top: 0
-                background-color: #E062A8
+                +opacity(.32,background-color,$texts-color)
         span
             z-index: 1
     &.secondary
@@ -106,6 +107,9 @@ body
             &.question-multiple
                 object-position: top
 
+.active-screen
+    opacity: 0
+
 .m
     .screen-image
         img.mobile

diff --git a/style/101-header-footer.sass b/style/101-header-footer.sass
index fc502288421eac1e0593e6ff374ec133e823201f..6b3952cd185998b638cdca64d9bbe4e5e6090cd7 100644 (file)
--- a/style/101-header-footer.sass
+++ b/style/101-header-footer.sass
@@ -16,6 +16,8 @@ header
 
 .header-question
     text-align: center
+    *
+        opacity: 0
     .abovetitle
         +font-size(16)
     .progress-container
@@ -57,6 +59,9 @@ header
         bottom: 24px
         transform: translateX(-50%)
 
+.footer-question
+    transform: translateY(100%)
+
 .m
     .header-question
         .abovetitle

diff --git a/style/103-question-multiple.sass b/style/103-question-multiple.sass
index a7bed405e809fe59d175d84280eacf51c7cacdcb..d0a2d32025b6e28f76c650ec8691a5fbfd2f7b1e 100644 (file)
--- a/style/103-question-multiple.sass
+++ b/style/103-question-multiple.sass
@@ -8,6 +8,7 @@
         +breakpoint(md)
             grid-template-columns: repeat(2, 1fr)
         &-item
+            opacity: 0
             label
                 width: 100%
                 height: 58px