[RFC] Add Three Homepage Sections (#1112)

src/shared/prerendered-app/Intro/SlideOnScroll/index.tsx

@@ -0,0 +1,51 @@
+import { h, Component, RenderableProps } from 'preact';
+
+interface Props {}
+interface State {}
+
+export default class SlideOnScroll extends Component<Props, State> {
+  private observer?: IntersectionObserver;
+
+  componentDidMount() {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+    const base = this.base as HTMLElement;
+    let wasOutOfView = false;
+
+    this.observer = new IntersectionObserver(
+      (entries, observer) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) {
+            wasOutOfView = true;
+            base.style.opacity = '0';
+            return;
+          }
+
+          // Only transition in if the element was at some point out of view.
+          if (wasOutOfView) {
+            base.style.opacity = '';
+            base.animate(
+              { offset: 0, opacity: '0', transform: 'translateY(40px)' },
+              { duration: 300, easing: 'ease' },
+            );
+          }
+          observer.unobserve(entry.target);
+        }
+      },
+      { threshold: 0.2 },
+    );
+
+    this.observer.observe(base);
+  }
+
+  componentWillUnmount() {
+    // Have to manually disconnect due to memory leaks in browsers.
+    // One day we'll be able to remove this, and the private property.
+    // https://twitter.com/jaffathecake/status/1405437361643790337
+    this.observer!.disconnect();
+  }
+
+  render({ children }: RenderableProps<Props>) {
+    return <div>{children}</div>;
+  }
+}