wip #6194 @0:40 animation intro

diff --git a/js/quiz.screen.intro.js b/js/quiz.screen.intro.js
index ad3e6c8b9924179de6f99e557b69363a05c766f9..5aab70666ba5204cfd395002a6129c3070a244e0 100644 (file)
--- a/js/quiz.screen.intro.js
+++ b/js/quiz.screen.intro.js
@@ -23,14 +23,21 @@ QuizScreenIntro.prototype = {
         //animer le texte d'intro
         let title = new SplitType("#welcome h2", {types: 'words, chars'})
         let text = new SplitType("#welcome p", {types: 'words, chars'})
-        gsap.from(title.words, {
-            opacity: 0, y: 20, duration: 1, stagger: 0.05
+        gsap.timeline({delay: .4})
+        .to("#title", {
+            y: 0
         })
-        gsap.to(text.words, {
-            opacity: 1, y: 0, duration: 1, ease: "power1.inOut", stagger: {
+        .to("#start", {
+            y: 0
+        },.2)
+        .from(title.words, {
+            opacity: 0, y: 20, duration: .2, stagger: 0.05
+        },.5)
+        .to(text.words, {
+            opacity: 1, y: 0, duration: .8, ease: "power4.easeInOut", stagger: {
                 amount: 0.2
             }
-        })
+        },.7)
     },
 
     resize: function (ww, hh) {

diff --git a/style/101-header-footer.sass b/style/101-header-footer.sass
index 6b3952cd185998b638cdca64d9bbe4e5e6090cd7..5e6941745a488d7ae973ac21bdcead1a102ed904 100644 (file)
--- a/style/101-header-footer.sass
+++ b/style/101-header-footer.sass
@@ -9,6 +9,7 @@ header
     height: 80px
     +flex-config(space-between,false,row,center)
     margin-top: -24px
+    transform: translateY(-100%)
 
 #logo
     height: 40px
@@ -58,6 +59,8 @@ header
         left: 50%
         bottom: 24px
         transform: translateX(-50%)
+        &#start
+            transform: translate(-50%, calc(100% + 24px))
 
 .footer-question
     transform: translateY(100%)