Add <AOS /> component

package.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@researchgate/react-intersection-observer": "^0.6.0",
+    "aos": "^2.2.0",
     "core-js": "^2.5.3",
     "dom-form-serializer": "^1.0.7",
     "intersection-observer": "^0.5.0",
@@ -47,8 +48,7 @@
     "start": "npm-run-all prepare-content -p start:content start:js",
     "start:js": "react-scripts start",
     "start:content": "chokidar 'content/**/**' -c 'npm run prepare-content'",
-    "build":
-      "npm-run-all -s prepare-content build:js build:postcss react-snapshot sw",
+    "build": "npm-run-all -s prepare-content build:js build:postcss react-snapshot sw",
     "build:js": "react-scripts build",
     "build:postcss": "postcss build/static/css/*.css -r",
     "react-snapshot": "react-snapshot",
@@ -60,6 +60,8 @@
     "eject": "react-scripts eject"
   },
   "reactSnapshot": {
-    "include": ["/404"]
+    "include": [
+      "/404"
+    ]
   }
 }

src/App.js

@@ -12,6 +12,7 @@ import Nav from './components/Nav'
 import Footer from './components/Footer'
 import GithubCorner from './components/GithubCorner'
 import ServiceWorkerNotifications from './components/ServiceWorkerNotifications'
+import AOS from './components/AOS'
 import data from './data.json'
 
 class App extends Component {
@@ -38,6 +39,7 @@ class App extends Component {
     return (
       <Router>
         <div className='React-Wrap'>
+          <AOS options={{ duration: 250 }} />
           <ScrollToTop />
           <ServiceWorkerNotifications reloadOnUpdate />
           <GithubCorner url='https://github.com/Jinksi/netlify-cms-react-starter' />

src/components/AOS.js

@@ -0,0 +1,14 @@
+import AOS from 'aos'
+import 'aos/dist/aos.css'
+
+export default ({ options }) => {
+  // See more: https://github.com/michalsnik/aos
+  const defaultOptions = {
+    offset: 300,
+    duration: 400,
+    easing: 'ease-out-sine',
+    delay: 0
+  }
+  AOS.init({ ...defaultOptions, ...options })
+  return null
+}

src/components/PageHeader.js

@@ -8,8 +8,20 @@ const PageHeader = ({ title, subtitle, backgroundImage }) => (
   <div className='section PageHeader relative'>
     {backgroundImage && <BackgroundImage src={backgroundImage} opacity={0.5} />}
     <div className='container relative'>
-      <h1 className='PageHeader--Title'>{title}</h1>
-      {subtitle ? <h2 className='PageHeader--Subtitle'>{subtitle}</h2> : ''}
+      <h1 className='PageHeader--Title' data-aos='fade-left'>
+        {title}
+      </h1>
+      {subtitle ? (
+        <h2
+          className='PageHeader--Subtitle'
+          data-aos='fade-left'
+          data-aos-duration='400'
+        >
+          {subtitle}
+        </h2>
+      ) : (
+        ''
+      )}
     </div>
   </div>
 )

yarn.lock

@@ -282,6 +282,14 @@ anymatch@^1.1.0, anymatch@^1.3.0:
     micromatch "^2.1.5"
     normalize-path "^2.0.0"
 
+aos@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/aos/-/aos-2.2.0.tgz#e388a873324c99e5dae0c5169226d1163dee5135"
+  dependencies:
+    classlist-polyfill "^1.0.3"
+    lodash.debounce "^4.0.6"
+    lodash.throttle "^4.0.1"
+
 append-transform@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
@@ -1595,6 +1603,10 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
+classlist-polyfill@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
+
 clean-css@4.1.x:
   version "4.1.9"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301"
@@ -4929,6 +4941,10 @@ lodash.cond@^4.3.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
 
+lodash.debounce@^4.0.6:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+
 lodash.defaults@^4.0.1, lodash.defaults@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@@ -4990,6 +5006,10 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.throttle@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+
 lodash.unescape@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"