4 files changed, 59 insertions, 37 deletions
diff --git a/Timeline/ClientApp/src/timeline/Timeline.tsx b/Timeline/ClientApp/src/timeline/Timeline.tsx
index f6ff8949..1ec3795f 100644
--- a/Timeline/ClientApp/src/timeline/Timeline.tsx
+++ b/Timeline/ClientApp/src/timeline/Timeline.tsx
@@ -56,41 +56,43 @@ const Timeline: React.FC<TimelineProps> = (props) => {
   }, [posts, onDelete]);
 
   return (
-    <div className={clsx('pr-2', props.className)}>
-      <Container fluid className="d-flex flex-column">
-        {(() => {
-          const length = posts.length;
-          return posts.map((post, i) => {
-            const av: number | undefined =
-              user != null && user.username === post.author.username
-                ? avatarVersion
-                : undefined;
+    <Container
+      fluid
+      className={clsx('d-flex flex-column position-relative', props.className)}
+    >
+      <div className="timeline-enter-animation-mask" />
+      {(() => {
+        const length = posts.length;
+        return posts.map((post, i) => {
+          const av: number | undefined =
+            user != null && user.username === post.author.username
+              ? avatarVersion
+              : undefined;
 
-            const toggleMore = onToggleDelete[i];
+          const toggleMore = onToggleDelete[i];
 
-            return (
-              <TimelineItem
-                post={post}
-                key={post.id}
-                current={length - 1 === i}
-                more={
-                  toggleMore
-                    ? {
-                        isOpen: indexShowDeleteButton === i,
-                        toggle: toggleMore,
-                        onDelete: onItemDelete[i],
-                      }
-                    : undefined
-                }
-                onClick={onItemClick}
-                avatarVersion={av}
-                onResize={onResize}
-              />
-            );
-          });
-        })()}
-      </Container>
-    </div>
+          return (
+            <TimelineItem
+              post={post}
+              key={post.id}
+              current={length - 1 === i}
+              more={
+                toggleMore
+                  ? {
+                      isOpen: indexShowDeleteButton === i,
+                      toggle: toggleMore,
+                      onDelete: onItemDelete[i],
+                    }
+                  : undefined
+              }
+              onClick={onItemClick}
+              avatarVersion={av}
+              onResize={onResize}
+            />
+          );
+        });
+      })()}
+    </Container>
   );
 };
 
diff --git a/Timeline/ClientApp/src/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/timeline/TimelineItem.tsx
index 215c7b12..9e08acc7 100644
--- a/Timeline/ClientApp/src/timeline/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelineItem.tsx
@@ -56,6 +56,8 @@ export interface TimelineItemProps {
   onClick?: () => void;
   avatarVersion?: number;
   onResize?: () => void;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 const TimelineItem: React.FC<TimelineItemProps> = (props) => {
@@ -78,8 +80,13 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
 
   return (
     <Row
-      className={clsx('position-relative flex-nowrap', current && 'current')}
+      className={clsx(
+        'position-relative flex-nowrap',
+        current && 'current',
+        props.className
+      )}
       onClick={props.onClick}
+      style={props.style}
     >
       <Col className="timeline-line-area">
         <div className="timeline-line-segment start"></div>
diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
index a4bad6aa..a246c0ce 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
@@ -107,9 +107,7 @@ export default function TimelinePageTemplateUI<
   const cardCollapseLocalStorageKey =
     timeline != null ? genCardCollapseLocalStorageKey(timeline.name) : null;
 
-  const [infoCardCollapse, setInfoCardCollapse] = React.useState<boolean>(
-    false
-  );
+  const [infoCardCollapse, setInfoCardCollapse] = React.useState<boolean>(true);
   React.useEffect(() => {
     if (cardCollapseLocalStorageKey != null) {
       const savedCollapse =
diff --git a/Timeline/ClientApp/src/timeline/timeline.sass b/Timeline/ClientApp/src/timeline/timeline.sass
index 511cc838..dad5251c 100644
--- a/Timeline/ClientApp/src/timeline/timeline.sass
+++ b/Timeline/ClientApp/src/timeline/timeline.sass
@@ -1,5 +1,20 @@
 @use 'sass:color'
 
+@keyframes timeline-enter-animation-mask-animation
+  from
+    height: calc(100% + 300px)
+  to
+    height: 0
+
+.timeline-enter-animation-mask
+  position: absolute
+  left: 0
+  top: 0
+  width: 100%
+  background: linear-gradient(to top, transparent 0, 200px, white 300px)
+  z-index: 100
+  animation: timeline-enter-animation-mask-animation 5s
+
 $timeline-line-width: 7px
 $timeline-line-node-radius: 18px
 $timeline-line-color: $primary