Add pager and reveal transitions

src/components/pager/deckdeckgo-pager/deckdeckgo-pager.scss

@@ -16,6 +16,7 @@
   fill: none;
   stroke-width: var(--pager-stroke-inner-width, 1.8);
   stroke-linecap: round;
+  transition: stroke-dasharray 500ms cubic-bezier(0.23, 1, 0.320, 1);
 }
 
 .deckgo-pager-percentage {

src/components/slides/deckdeckgo-slide.scss

@@ -10,6 +10,9 @@
   --slide-padding-bottom-default: 64px;
   --slide-padding-start-default: 64px;
 
+  --slide-reveal-transform: translateX(-4px);
+  --slide-reveal-duration: 200ms;
+
   @media screen and (max-width: 1024px) {
     --slide-padding-top-default: 16px;
     --slide-padding-end-default: 32px;

src/components/slides/deckdeckgo-slide.tsx

@@ -26,7 +26,12 @@ export class DeckdeckgoSlideUtils {
       } else {
         Array.from(elements).forEach((element: HTMLElement) => {
           element.style.setProperty('visibility', 'hidden');
+          element.style.setProperty('transform', 'var(--slide-reveal-transform)');
+          element.style.setProperty('opacity', '0');
+
           element.classList.add('deckgo-reveal');
+          element.style.setProperty('transition', 'all var(--slide-reveal-duration) cubic-bezier(0.23, 1, 0.320, 1)');
+
         });
       }
     });
@@ -45,6 +50,8 @@ export class DeckdeckgoSlideUtils {
 
         if (nextElement) {
           nextElement.style.setProperty('visibility', 'initial');
+          nextElement.style.setProperty('opacity', '1');
+          nextElement.style.setProperty('transform', 'none');
           couldSwipe = false;
         }
       }
@@ -67,6 +74,8 @@ export class DeckdeckgoSlideUtils {
 
         if (nextElement) {
           nextElement.style.setProperty('visibility', 'hidden');
+          nextElement.style.setProperty('transform', 'var(--slide-reveal-transform)');
+          nextElement.style.setProperty('opacity', '0');
           couldSwipe = false;
         }
       }