activate animation

packages/presentation/src/components/Presentation.module.scss

@@ -3,7 +3,15 @@
   // workaround from https://github.com/css-modules/css-modules/issues/295#issuecomment-952885628
   &:global(.reveal) :global {
     .slides {
+      inset: 50% auto auto 50%;
+      width: 1280px;
+      height: 700px;
       text-align: unset;
+      transform: translate(-50%, -50%);
+
+      section {
+        position: absolute;
+      }
     }
     .controls {
       bottom: 24px;

packages/presentation/src/components/Presentation.tsx

@@ -17,6 +17,16 @@ const baseRevealOptions: Reveal.Options = {
   slideNumber: 'c/t',
 };
 
+/**
+ * Remove all [hidden] in order to activate transitions
+ *   cz: All of .past and .future elements are hidden by `display: none !important`
+ * @see https://getbootstrap.com/docs/4.6/content/reboot/#html5-hidden-attribute
+ */
+const removeAllHiddenElements = () => {
+  const sections = document.querySelectorAll('.grw-presentation section');
+  sections.forEach(section => section.removeAttribute('hidden'));
+};
+
 export type PresentationProps = {
   options: PresentationOptions,
   children?: string,
@@ -27,20 +37,25 @@ export const Presentation = (props: PresentationProps): JSX.Element => {
   const { revealOptions } = options;
 
   useEffect(() => {
+    let deck;
     if (children != null) {
-      const deck = new Reveal({ ...baseRevealOptions, ...revealOptions });
+      deck = new Reveal({ ...baseRevealOptions, ...revealOptions });
       deck.initialize()
         .then(() => deck.slide(0)); // navigate to the first slide
+
+      deck.on('ready', removeAllHiddenElements);
+      deck.on('slidechanged', removeAllHiddenElements);
     }
 
     return function cleanup() {
-      Reveal?.destroy?.();
+      deck?.off('ready', removeAllHiddenElements);
+      deck?.off('slidechanged', removeAllHiddenElements);
     };
   }, [children, revealOptions]);
 
   return (
     <div className={`grw-presentation ${styles['grw-presentation']} reveal ${MARP_CONTAINER_CLASS_NAME}`}>
-      <div className="slides d-flex justify-content-center align-items-center">
+      <div className="slides">
         <Sections options={options}>{children}</Sections>
       </div>
     </div>