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,13 +19,14 @@
 
   <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>
+      <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 }},
@@ -33,6 +34,7 @@
           </p>
         {{/each}}
       </div>
+    </div>
 
     {{> components/button
       label=hero.button.label
@@ -43,11 +45,13 @@
 
     <a href="{{ hero.nextSectionLink.link }}" class="hero__scroll">
       <div class="js-parallax" data-rellax-speed="0.4">
+        <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>
 
   </div>

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 },
     });
   }