Add reveal to all elements in hero section

src/hbs/partials/components/hero.hbs

@@ -1,9 +1,9 @@
 <section class="section hero" {{#if hero.id}} id="{{hero.id}}" {{/if}}>
     <div id="klein" class="hero__canvas">
-      <div class="hero__canvas-info hero__canvas-info--desktop">
+      <div class="hero__canvas-info hero__canvas-info--desktop js-sr">
         {{ hero.canvas.info.desktop }}
       </div>
-      <div class="hero__canvas-info hero__canvas-info--mobile">
+      <div class="hero__canvas-info hero__canvas-info--mobile js-sr">
         {{ hero.canvas.info.mobile }}
       </div>
     </div>
@@ -19,19 +19,21 @@
 
   <div class="hero__counter">
     <div class="js-parallax" data-rellax-speed="-0.5">
-      {{ hero.counterText }}
+      <div class="js-sr">{{ hero.counterText }}</div>
     </div>
   </div>
 
   <div class="hero__bottom">
     <div class="hero__detail js-parallax" data-rellax-speed="-0.2">
-      <h3 class="hero__detail__title">{{ hero.eventsLabel }}</h3>
-      {{#each hero.events as |event|}}
-        <p class="hero__detail__event">
-          {{ event.text }},
-          <strong class="hero__detail__city">{{ event.city }}</strong>
-        </p>
-      {{/each}}
+      <h3 class="hero__detail__title js-sr">{{ hero.eventsLabel }}</h3>
+      <div class="js-sr">
+        {{#each hero.events as |event|}}
+          <p class="hero__detail__event">
+            {{ event.text }},
+            <strong class="hero__detail__city">{{ event.city }}</strong>
+          </p>
+        {{/each}}
+      </div>
     </div>
 
     {{> components/button
@@ -43,9 +45,11 @@
 
     <a href="{{ hero.nextSectionLink.link }}" class="hero__scroll">
       <div class="js-parallax" data-rellax-speed="0.4">
-        {{svg 'images/arrow-down.svg' class="hero__scroll__icon"}}
-        <div class="hero__scroll__text" data-title="{{ hero.nextSectionLink.text }}">
-          {{ hero.nextSectionLink.text }}
+        <div class="js-sr">
+          {{svg 'images/arrow-down.svg' class="hero__scroll__icon"}}
+          <div class="hero__scroll__text" data-title="{{ hero.nextSectionLink.text }}">
+            {{ hero.nextSectionLink.text }}
+          </div>
         </div>
       </div>
     </a>

src/scripts/reveal.js

@@ -23,7 +23,7 @@ class Reveal {
     ScrollReveal().reveal('.js-sr', {
       scale: 1,
       distance: '30px',
-      duration: 600,
+      duration: 1500,
       viewOffset: { bottom: 50 },
     });
   }