Block animations proof of concept

site/src/common/blocks/MediaGalleryBlock.tsx

@@ -6,6 +6,7 @@ import { type MediaGalleryBlockData } from "@src/blocks.generated";
 import { MediaBlock } from "@src/common/blocks/MediaBlock";
 import { Typography } from "@src/common/components/Typography";
 import { PageLayout } from "@src/layout/PageLayout";
+import { FadeBoxInOnScroll } from "@src/util/animations/FadeBoxInOnScroll";
 import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
 import { useIntl } from "react-intl";
@@ -92,7 +93,9 @@ export const MediaGalleryBlock = withPreview(
 export const PageContentMediaGalleryBlock = (props: MediaGalleryBlockProps) => (
     <PageLayout grid>
         <div className={styles.pageLayoutContent}>
-            <MediaGalleryBlock {...props} />
+            <FadeBoxInOnScroll offset={200} delay={300}>
+                <MediaGalleryBlock {...props} />
+            </FadeBoxInOnScroll>
         </div>
     </PageLayout>
 );

site/src/documents/pages/blocks/BasicStageBlock.tsx

@@ -6,6 +6,7 @@ import { HeadingBlock } from "@src/common/blocks/HeadingBlock";
 import { MediaBlock } from "@src/common/blocks/MediaBlock";
 import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
 import { PageLayout } from "@src/layout/PageLayout";
+import { FadeBoxInOnLoad } from "@src/util/animations/FadeBoxInOnLoad";
 
 import styles from "./BasicStageBlock.module.scss";
 
@@ -27,9 +28,15 @@ export const BasicStageBlock = withPreview(
             <div className={styles.imageOverlay} style={{ opacity: `${overlay}%` }} />
             <PageLayout className={styles.absoluteGridRoot} grid>
                 <div className={styles.content} style={{ alignItems: alignment }}>
-                    <HeadingBlock data={heading} />
-                    <RichTextBlock data={text} />
-                    <CallToActionListBlock data={callToActionList} />
+                    <FadeBoxInOnLoad direction="bottom" duration={1200} delay={200}>
+                        <HeadingBlock data={heading} />
+                    </FadeBoxInOnLoad>
+                    <FadeBoxInOnLoad delay={1000} duration={3000}>
+                        <RichTextBlock data={text} />
+                    </FadeBoxInOnLoad>
+                    <FadeBoxInOnLoad delay={1400} duration={3000}>
+                        <CallToActionListBlock data={callToActionList} />
+                    </FadeBoxInOnLoad>
                 </div>
             </PageLayout>
         </div>

site/src/documents/pages/blocks/BillboardTeaserBlock.module.scss

@@ -28,6 +28,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    text-align: center;
     color: var(--text-primary);
     grid-column: 3 / -3;
 
@@ -40,6 +41,13 @@
     }
 }
 
+.callToActionWrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+
 .imageMobile {
     @media (min-width: $breakpoint-sm) {
         display: none;

site/src/documents/pages/blocks/BillboardTeaserBlock.tsx

@@ -5,33 +5,44 @@ import { HeadingBlock } from "@src/common/blocks/HeadingBlock";
 import { MediaBlock } from "@src/common/blocks/MediaBlock";
 import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
 import { PageLayout } from "@src/layout/PageLayout";
+import { FadeBoxInOnScroll } from "@src/util/animations/FadeBoxInOnScroll";
 
 import styles from "./BillboardTeaserBlock.module.scss";
 
 export const BillboardTeaserBlock = withPreview(
-    ({ data: { media, heading, text, overlay, callToActionList } }: PropsWithData<BillboardTeaserBlockData>) => (
-        <div className={styles.root}>
-            <div className={styles.imageMobile}>
-                <MediaBlock data={media} aspectRatio="1x1" />
-            </div>
-            <div className={styles.imageTablet}>
-                <MediaBlock data={media} aspectRatio="4x3" />
-            </div>
-            <div className={styles.imageDesktop}>
-                <MediaBlock data={media} aspectRatio="16x9" />
-            </div>
-            <div className={styles.imageLargeDesktop}>
-                <MediaBlock data={media} aspectRatio="3x1" />
-            </div>
-            <div className={styles.imageOverlay} style={{ opacity: `${overlay}%` }} />
-            <PageLayout className={styles.absoluteGridRoot} grid>
-                <div className={styles.content}>
-                    <HeadingBlock data={heading} />
-                    <RichTextBlock data={text} />
-                    <CallToActionListBlock data={callToActionList} />
+    ({ data: { media, heading, text, overlay, callToActionList } }: PropsWithData<BillboardTeaserBlockData>) => {
+        return (
+            <div className={styles.root}>
+                <div className={styles.imageMobile}>
+                    <MediaBlock data={media} aspectRatio="1x1" />
                 </div>
-            </PageLayout>
-        </div>
-    ),
+                <div className={styles.imageTablet}>
+                    <MediaBlock data={media} aspectRatio="4x3" />
+                </div>
+                <div className={styles.imageDesktop}>
+                    <MediaBlock data={media} aspectRatio="16x9" />
+                </div>
+                <div className={styles.imageLargeDesktop}>
+                    <MediaBlock data={media} aspectRatio="3x1" />
+                </div>
+                <div className={styles.imageOverlay} style={{ opacity: `${overlay}%` }} />
+                <PageLayout className={styles.absoluteGridRoot} grid>
+                    <div className={styles.content}>
+                        <FadeBoxInOnScroll direction="bottom" offset={300}>
+                            <HeadingBlock data={heading} />
+                        </FadeBoxInOnScroll>
+                        <FadeBoxInOnScroll offset={450} delay={300}>
+                            <RichTextBlock data={text} />
+                        </FadeBoxInOnScroll>
+                        <FadeBoxInOnScroll offset={500} delay={300}>
+                            <div className={styles.callToActionWrapper}>
+                                <CallToActionListBlock data={callToActionList} />
+                            </div>
+                        </FadeBoxInOnScroll>
+                    </div>
+                </PageLayout>
+            </div>
+        );
+    },
     { label: "Billboard Teaser" },
 );

site/src/documents/pages/blocks/ColumnsBlock.tsx

@@ -9,6 +9,7 @@ import { StandaloneHeadingBlock } from "@src/common/blocks/StandaloneHeadingBloc
 import { StandaloneMediaBlock } from "@src/common/blocks/StandaloneMediaBlock";
 import { StandaloneRichTextBlock } from "@src/common/blocks/StandaloneRichTextBlock";
 import { PageLayout } from "@src/layout/PageLayout";
+import { FadeBoxInOnScroll } from "@src/util/animations/FadeBoxInOnScroll";
 import clsx from "clsx";
 
 import styles from "./ColumnsBlock.module.scss";
@@ -42,9 +43,11 @@ const layoutToStyleMap: { [key: string]: string } = {
 export const ColumnsBlock = withPreview(
     ({ data: { columns, layout } }: PropsWithData<ColumnsBlockData>) => (
         <PageLayout grid>
-            {columns.map((column) => (
+            {columns.map((column, index) => (
                 <div className={clsx(styles.column, layoutToStyleMap[layout])} key={column.key}>
-                    <ColumnsContentBlock data={column.props} />
+                    <FadeBoxInOnScroll delay={300 * index}>
+                        <ColumnsContentBlock data={column.props} />
+                    </FadeBoxInOnScroll>
                 </div>
             ))}
         </PageLayout>

site/src/documents/pages/blocks/TeaserBlock.tsx

@@ -1,19 +1,27 @@
-import { ListBlock, type PropsWithData, withPreview } from "@comet/site-nextjs";
+import { type PropsWithData, withPreview } from "@comet/site-nextjs";
 import { type TeaserBlockData } from "@src/blocks.generated";
 import { PageLayout } from "@src/layout/PageLayout";
+import { FadeBoxInOnScroll } from "@src/util/animations/FadeBoxInOnScroll";
+import { FadeGroup } from "@src/util/animations/FadeGroup";
 
 import styles from "./TeaserBlock.module.scss";
 import { TeaserItemBlock } from "./TeaserItemBlock";
 
 export const TeaserBlock = withPreview(
     ({ data }: PropsWithData<TeaserBlockData>) => (
-        <PageLayout grid>
-            <div className={styles.pageLayoutContent}>
-                <div className={styles.itemWrapper}>
-                    <ListBlock data={data} block={(block) => <TeaserItemBlock data={block} />} />
+        <FadeGroup disabledBreakpoints={["xs", "sm"]}>
+            <PageLayout grid>
+                <div className={styles.pageLayoutContent}>
+                    <div className={styles.itemWrapper}>
+                        {data.blocks.map((block, index) => (
+                            <FadeBoxInOnScroll key={block.key} delay={100 * index} direction="left">
+                                <TeaserItemBlock data={block.props} />
+                            </FadeBoxInOnScroll>
+                        ))}
+                    </div>
                 </div>
-            </div>
-        </PageLayout>
+            </PageLayout>
+        </FadeGroup>
     ),
     { label: "Teaser" },
 );

site/src/layout/header/DesktopMenu.module.scss

@@ -19,7 +19,7 @@
 }
 
 .subLevelNavigation {
-    display: none;
+    display: flex;
     flex-direction: column;
     gap: var(--spacing-s200);
     position: absolute;
@@ -33,9 +33,15 @@
     border-left: 1px solid var(--brand-grey-200);
     border-bottom: 1px solid var(--brand-grey-200);
     border-right: 1px solid var(--brand-grey-200);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+    visibility: hidden;
 
     &--expanded {
-        display: flex;
+        opacity: 1;
+        pointer-events: auto;
+        visibility: visible;
     }
 }
 

site/src/styles/global.scss

@@ -45,6 +45,7 @@
 
 html {
     /* Prevent font size adjustments after orientation changes in mobile devices */
+    scroll-behavior: smooth;
     text-size-adjust: 100%;
 
     --header-height: 100px;

site/src/util/animations/FadeBoxInOnLoad.module.scss

@@ -0,0 +1,92 @@
+@keyframes fade-in-from-left {
+    from {
+        opacity: 0;
+        transform: translate3d(-30px, 0, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes fade-in-from-right {
+    from {
+        opacity: 0;
+        transform: translate3d(30px, 0, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes fade-in-from-top {
+    from {
+        opacity: 0;
+        transform: translate3d(0, -30px, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes fade-in-from-bottom {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 30px, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.root {
+    animation-duration: var(--fade-duration, 0.8s);
+    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+    animation-fill-mode: both;
+    animation-delay: var(--fade-delay, 0ms);
+}
+
+.fromLeft {
+    animation-name: fade-in-from-left;
+}
+
+.fromRight {
+    animation-name: fade-in-from-right;
+}
+
+.fromTop {
+    animation-name: fade-in-from-top;
+}
+
+.fromBottom {
+    animation-name: fade-in-from-bottom;
+}
+
+.fadeIn {
+    animation-name: fade-in;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .root {
+        animation: none;
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}

site/src/util/animations/FadeBoxInOnLoad.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { usePreview } from "@comet/site-nextjs";
+import clsx from "clsx";
+import { type ReactElement } from "react";
+
+import styles from "./FadeBoxInOnLoad.module.scss";
+
+interface FadeBoxInOnLoadProps {
+    direction?: "top" | "right" | "bottom" | "left";
+    children: ReactElement;
+    delay?: number;
+    duration?: number;
+}
+
+export function FadeBoxInOnLoad({ children, direction = undefined, delay = 0, duration }: FadeBoxInOnLoadProps) {
+    const { previewType } = usePreview();
+
+    const style = {
+        "--fade-delay": `${delay}ms`,
+        ...(duration != null && { "--fade-duration": `${duration}ms` }),
+    } as React.CSSProperties;
+
+    return (
+        <div
+            className={clsx(
+                styles.root,
+                previewType !== "BlockPreview" && direction === "left" && styles.fromLeft,
+                previewType !== "BlockPreview" && direction === "right" && styles.fromRight,
+                previewType !== "BlockPreview" && direction === "top" && styles.fromTop,
+                previewType !== "BlockPreview" && direction === "bottom" && styles.fromBottom,
+                previewType !== "BlockPreview" && direction === undefined && styles.fadeIn,
+            )}
+            style={style}
+        >
+            {children}
+        </div>
+    );
+}

site/src/util/animations/FadeBoxInOnScroll.module.scss

@@ -0,0 +1,39 @@
+.scrollContainer {
+    opacity: 0;
+    transition:
+            opacity var(--fade-duration, 500ms) ease-in-out var(--fade-delay, 0ms),
+            transform 1s cubic-bezier(0.22, 1, 0.36, 1) var(--fade-delay, 0ms);
+}
+
+.fullHeight {
+    height: 100%;
+}
+
+.fromLeft {
+    transform: translate3d(-40px, 0, 0);
+}
+
+.fromRight {
+    transform: translate3d(40px, 0, 0);
+}
+
+.fromTop {
+    transform: translate3d(0, -40px, 0);
+}
+
+.fromBottom {
+    transform: translate3d(0, 40px, 0);
+}
+
+.fadeIn {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .scrollContainer {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        transition: none;
+    }
+}