fix(chapter): add Intersection Observer for active sections

apps/demol/src/app/app.scss

@@ -15,6 +15,8 @@
 *::before,
 *::after {
   box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 html {

libs/ui/src/lib/chapter/chapter.scss

@@ -47,6 +47,7 @@
     &--deep {
       transform: translateZ(-600px) scale(3);
       z-index: 2;
+      height: 50vh;
     }
   }
 }
@@ -55,18 +56,23 @@
   z-index: -1;
 }
 
+.active {
+  z-index: 25;
+}
+
 .fade-in-scale {
-  animation: fade-in-scale-down 5s linear 1;
+  animation: fade-in-scale-down 5s ease-out both;
 }
 
-@keyframes fade-in-scale-down {
+ @keyframes fade-in-scale-down {
   0% {
-    scale: 1.2;
-    filter: blur(7px) brightness(2) grayscale(1);
+    transform: scale(1.25) translateY(-15px);
+    transform-origin: 50% 16%;
+    filter: blur(5px) 
   }
-
   100% {
-    scale: 1;
-    filter: blur(0) brightness(1) grayscale(0);
+    transform: scale(1) translateY(0);
+    transform-origin: top;
+    filter: blur(0) 
   }
 }

libs/ui/src/lib/chapter/chapter.tsx

@@ -1,4 +1,5 @@
 import React, { Fragment, useContext} from 'react';
+import { InView } from 'react-intersection-observer'
 
 import Header from '../header/header';
 import Group from '../group/group';
@@ -16,10 +17,13 @@ export const Chapter = (props: ChapterProps) => {
     return props.groups.map((group, index) =>
     <Fragment key={index}>
       {(!group.character || group.character === character) && 
-        <section key={index} style={{ zIndex: props.groups.length - index }}
-          className={`parallax__group ${group.background ? 'back' : ''}`}>
-        <Group {...group} />
-      </section>}
+      <InView>
+        {({ inView, ref, entry }) => (
+          <section ref={ref} key={index} className={`parallax__group ${group.background ? 'back' : ''} ${inView ? 'active' : ''}`}>
+            <Group {...group} />
+          </section>
+        )}
+      </InView>}
     </Fragment>
     )
   }

libs/ui/src/lib/group/group.tsx

@@ -22,7 +22,7 @@ export const Group = ({
 
   const renderBackground = () => {
     return <div className={`parallax__layer parallax__layer--back`}>
-      <Image value={background} width={'bg'}/>
+      <Image value={background} layer={'bg'}/>
     </div>
   }
 

libs/ui/src/lib/image/image.scss

@@ -3,6 +3,7 @@
   display: block;
   filter: saturate(.8);
   opacity: .9;
+  transition: all 0.50s;
 }
 
 .primary {
@@ -21,3 +22,9 @@ img {
 .bg {
   opacity: 0.3;
 }
+
+.highlighted {
+  transition: all 0.50s;
+  filter: brightness(110%);
+  transform: scale(1.1);
+}

libs/ui/src/lib/image/image.tsx

@@ -1,32 +1,32 @@
-import React, {useContext} from 'react';
+import React, {useContext, useState} from 'react';
 import { IMAGE_SUFFIX, IMAGE_SUFFIX_ALTERNATE } from '@gerdesque/data';
 import {AppContext } from '../chapter/context';
 import './image.scss';
 
 /* eslint-disable-next-line */
 export interface ImageProps {
   value: string
-  width?: string
+  layer?: string
   title?: string
 }
 
 export const Image = (props: ImageProps) => {
   const [character, setCharacter] = useContext(AppContext);
+  const [hover, setHover] = useState(false);
+  //const [source, setSource] = useState(props.value);
 
   const chooseCharacter = () => {
-    setCharacter(props.title)
+    props.title && setCharacter(props.title);
   }
 
   return (
-    <picture className={`chapter_picture ${props.width}`} onClick={() => chooseCharacter()}>
+    <picture className={`chapter_picture ${props.layer} ${hover ? 'highlighted' : ''}`} onMouseOut={() => setHover(false)} onMouseOver={() => setHover(true)} onClick={() => chooseCharacter()}>
       <source srcSet={"./assets/"+props.value+IMAGE_SUFFIX} type='image/webp' />
       <source srcSet={"./assets/fallback/"+props.value+IMAGE_SUFFIX_ALTERNATE} type='image/png' />
       <img draggable="false" src={"./assets/fallback/"+props.value+IMAGE_SUFFIX_ALTERNATE} alt={props.value} />
     </picture>
   )
 
-  // <button type='button' className='link-button' key={avatar} onMouseOut={() => this.setState({ isHover: false })} onMouseOver={() => this.setState({ isHover: avatar })} onClick={() => this.setState({ avatar: avatar })}>{avatar}</button>)}
-
 };
 
 export default Image;

libs/ui/src/lib/text/text.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import Fade from 'react-reveal/Fade';
 import './text.scss';
 
-/* eslint-disable-next-line */
 export interface TextProps {
   value: string
 }

libs/ui/src/lib/video/video.tsx

@@ -6,7 +6,7 @@ import './video.scss';
 /* eslint-disable-next-line */
 export interface VideoProps {
   value: string,
-  width: string
+  layer: string
   title: string
 }
 
@@ -19,7 +19,7 @@ export const Video = (props: VideoProps) => {
   };
 
   return (
-    <div className={`chapter_video ${props.width} ${isPlaying ? 'theater' : ''}` }>
+    <div className={`chapter_video ${props.layer} ${isPlaying ? 'theater' : ''}` }>
       <p>{props.title}</p>
       <video controls onPlaying={() => playVideo(true)} onPause={() => playVideo(false)}>
         <source type='video/mp4' src={"./assets/movies/"+props.value+VIDEO_SUFFIX}></source>

package.json

@@ -90,6 +90,7 @@
     "husky": "^4.2.5",
     "jest": "25.2.3",
     "prettier": "1.19.1",
+    "react-intersection-observer": "^8.26.2",
     "react-reveal": "^1.2.2",
     "standard-version": "^8.0.0",
     "ts-jest": "25.2.1",

yarn.lock

@@ -13917,6 +13917,13 @@ react-input-autosize@^2.2.2:
   dependencies:
     prop-types "^15.5.8"
 
+react-intersection-observer@^8.26.2:
+  version "8.26.2"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.26.2.tgz#0562ff0c06b2b10e809190c2fa9b6ded656e6e16"
+  integrity sha512-GmSjLNK+oV7kS+BHfrJSaA4wF61ELA33gizKHmN+tk59UT6/aW8kkqvlrFGPwxGoaIzLKS2evfG5fgkw5MIIsg==
+  dependencies:
+    tiny-invariant "^1.1.0"
+
 react-is@^16.12.0, react-is@^16.5.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -16194,7 +16201,7 @@ tiny-inflate@^1.0.0, tiny-inflate@^1.0.2:
   resolved "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
   integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
 
-tiny-invariant@^1.0.2:
+tiny-invariant@^1.0.2, tiny-invariant@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
   integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==