feat(text): add text reveal animation

apps/demol/src/app/app.json

@@ -13,7 +13,8 @@
             {
               "type": "text",
               "value": "Es ist 1928. In der Weimarer Republik leben viele Kinder und Jugendliche, deren Eltern zur großen Arbeiterschaft gehören, die im Bergbau, in Webereien, Fabriken und Stahlwerken arbeiten. Dazu gehören Anna, Karl und Gerda.",
-              "layer": "fore"
+              "layer": "fore",
+              "title": "reveal"
             },
             {
               "type": "image",

libs/home/src/lib/home.tsx

@@ -7,7 +7,7 @@ const home:ChapterProps = {
   link: "home",
   groups: [
   {
-    "grouped": false,
+    "grouped": true,
     "row": false,
     "content": [
       {
@@ -18,7 +18,7 @@ const home:ChapterProps = {
       {
         "type": "text",
         "value": "Unsere Website richtet sich an all jene, die sich spielerisch mit dem Thema „Kinderrepublik“ und partizipativer Jugendarbeit in der ersten Hälfte des 20. Jahrhunderts beschäftigen wollen und erfahren möchten, wie solche Zeltlager als Form früher und praktischer Demokratiebildung funktioniert haben. In Zeiten wie jetzt, wo mehr und mehr Menschen sich von den demokratischen Institutionen abwenden, lohnt es sich, einen Blick zurückzuwerfen und zu schauen, wie Demokratiebildung insbesondere für bildungsfernere Schichten in der Vergangenheit funktioniert hat und inwiefern wir dafür etwas für unsere heutige Zeit lernen können.",
-        "layer": "back"
+        "layer": "fore"
       }
     ]
   }

libs/ui/src/lib/text/text.scss

@@ -8,4 +8,27 @@
 
 p {
   text-align: center;
+}
+
+.reveal span {
+  position: relative;
+  //bottom: -1em;
+  opacity: 0;
+  animation: move-text 0.1s forwards;
+}
+
+@keyframes move-text {
+  0% {
+      //bottom: -0.2em;
+      opacity: 1;
+  }
+
+  50% {
+      //bottom: 0.2em;
+  }
+
+  100% {
+      //bottom: 0;
+      opacity: 1;
+  }
 }

libs/ui/src/lib/text/text.tsx

@@ -1,12 +1,28 @@
 import React from 'react';
+import Reveal from 'react-reveal/Reveal';
 import Fade from 'react-reveal/Fade';
 import './text.scss';
 
 export interface TextProps {
-  value: string
+  value: string,
+  title: string
 }
 
 export const Text = (props: TextProps) => {
+  const isRevealing = props.title === 'reveal';
+  if (isRevealing) {
+    return (
+      <div className='box'>
+        <Reveal effect="reveal" duration={100}>
+          <p>
+            {props.value.split("").map(function(char, index){
+              return <span aria-hidden="true" key={index} style={{animationDelay: (0.1 + index / 10) + "s"}}>{char}</span>;
+            })}
+          </p> 
+        </Reveal>
+      </div>
+    );
+  }
   return (
     <div className='box'>
       <Fade bottom duration={5000}>