wip #6194 @0:10 animation runningman

diff --git a/js/quiz.animations.js b/js/quiz.animations.js
index 3453e30c610b4e83ad58827851338671e3b99831..4a5a66cfc7018436cb1aacf60488c9e05aa1d307 100644 (file)
--- a/js/quiz.animations.js
+++ b/js/quiz.animations.js
@@ -66,7 +66,35 @@ QuizAnimations.prototype = {
     runningMan: function () {
         $(".runningman").empty()
         this.quiz.animations.load("RUNNINGMAN_BTN", ".active-screen .runningman", '', true);
+    },
+
+    footer: function(activeScreen) {
+        const $this = this
+        gsap.timeline().to(".active-screen .footer-question", {
+            opacity: 0,
+            duration: 1,
+            delay: .5,
+            ease: 'power4.easeIn',
+            onComplete: function() {
+                $(".active-screen .footer-question").css("z-index",3)
+            }
+        }).to(".active-screen .footer-question", {
+            y: "100%",
+            duration: 0,
+            onComplete: function() {
+                $(activeScreen).find('.btn.continue').removeClass('none')
+                $(activeScreen).find('.btn.validate').addClass('none')
+                // Hide reset button
+                $this.quiz.animations.fadeOut($(activeScreen).find('.btn.reset'), true);
+            }
+        }).to(".active-screen .footer-question", {
+            y: 0,
+            duration: .5,
+            opacity: 1
+        })
     }
+
+
 }
 
 

diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index 08090a6b734d2f6937e13ea7a79f4e381398235c..338041bf0675519eff0051ce18e3188812779584 100644 (file)
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -69,15 +69,7 @@ QuizScreens.prototype = {
         // Disable form, we don't want the user be able to click on items
         $(form).addClass('disabled');
 
-        // Remove validate button and show continue button
-        setTimeout(function () {
-            $(activeScreen).find('.btn.continue').removeClass('none')
-            $(activeScreen).find('.btn.validate').addClass('none');
-        }, 10);
-
-
-        // Hide reset button
-        this.quiz.animations.fadeOut($(activeScreen).find('.btn.reset'), true);
+        this.quiz.animations.footer(activeScreen)
 
         let results = review.answersStatus;
 
@@ -139,36 +131,42 @@ QuizScreens.prototype = {
             }
             $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 .list-item .content", {
-                autoAlpha: 1,
-                stagger: .1
-            }, "<+=.3")
-            .to(".active-screen .footer-question", {
-                y: 0,
-                duration: 1,
-                opacity: 1,
-                ease: "circ.out",
-                onComplete: function () {
-                    // if countdown enable we launch it
-                    if($this.quiz.question.current() !== undefined) {
-                        if (parseInt($this.quiz.question.current().countdown_enable)) {
-                            $this.countdown()
+            if($(".active-screen").find(".header-question").length > 0) {
+                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 .list-item .content", {
+                    autoAlpha: 1,
+                    stagger: .1
+                }, "<+=.3")
+                .to(".active-screen .footer-question", {
+                    y: 0,
+                    duration: 1,
+                    opacity: 1,
+                    ease: "circ.out",
+                    onComplete: function () {
+                        // if countdown enable we launch it
+                        if ($this.quiz.question.current() !== undefined) {
+                            if (parseInt($this.quiz.question.current().countdown_enable)) {
+                                $this.countdown()
+                            }
                         }
                     }
-                }
-            }, 1.4)
+                }, 1.4)
+            }else {
+                gsap.to(screenToShow, {
+                    autoAlpha: 1
+                })
+            }
 
             // Reset form to prevent browser letting a option selected after a refresh
             $this.resetForm();
@@ -242,6 +240,7 @@ QuizScreens.prototype = {
                 clearInterval($this.intervalCountDown)
                 $this.intervalCountDown = 0;
                 $this.currentQuestionAnswers = []
+                $(".active-screen .runningman").css("opacity", 0)
                 /**
                  *
                  * provisoire

diff --git a/style/104-animations.sass b/style/104-animations.sass
index 90121715ca6692108cc29b33021ec99727687632..82287f248e57ca755e252d8320e4bf091730cc51 100644 (file)
--- a/style/104-animations.sass
+++ b/style/104-animations.sass
@@ -3,7 +3,7 @@
     top: 50%
     left: 50%
     transform: translate(-50%,-50%)
-    z-index: 1
+    z-index: 2
     width: 100%
     height: 100%
     +opacity(.4, background-color, $neutral-color)