From: soufiane <soufiane@cubedesigners.com>
Date: Fri, 25 Aug 2023 10:10:56 +0000 (+0200)
Subject: wip #6194 @0:40 animation intro
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=a527029d0908c1af0ae0e87eae3a259ad59a7b9d;p=fluidbook-toolbox-quiz.git

wip #6194 @0:40 animation intro
---

diff --git a/js/quiz.screen.intro.js b/js/quiz.screen.intro.js
index ad3e6c8..5aab706 100644
--- 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 6b3952c..5e69417 100644
--- 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%)