Fix bank scroll animation

components/bank/ScrollHint.js

@@ -1,16 +1,18 @@
 import { Box } from 'theme-ui'
-import AnimatedValue from 'animated-value'
+import anime from 'animejs/lib/anime.es.js'
 
 const handleClick = () => {
-  const scrollValue = new AnimatedValue({
-    start: document.scrollingElement.scrollTop,
-    end: window.innerHeight,
-    ease: AnimatedValue.CURVES.EXPO_OUT,
-  })
-  scrollValue.play(800, () => {
-    document.scrollingElement.scrollTop = scrollValue.value()
-  })
+  const scroll = { x: document.scrollingElement.scrollTop }
 
+  anime({
+    targets: scroll,
+    x: window.innerHeight,
+    easing: 'easeOutExpo',
+    duration: 800,
+    update: () => {
+      document.scrollingElement.scrollTop = scroll.x
+    }
+  })
 }
 const ScrollHint = () => (
   <Box

next.config.js

@@ -1,5 +1,4 @@
-const withMDX = require('@next/mdx')({ extension: /\.mdx?$/ })
-module.exports = withMDX({
+const nextConfig = {
   trailingSlash: true,
   pageExtensions: ['js', 'jsx', 'mdx'],
   images: {
@@ -187,4 +186,11 @@ module.exports = withMDX({
       }
     ]
   }
-})
+}
+
+const withPlugins = require('next-compose-plugins')
+
+const withMDX = require('@next/mdx')({ extension: /\.mdx?$/ })
+const withTM = require('next-transpile-modules')(['animejs'])
+
+module.exports = withPlugins([withTM, withMDX], nextConfig)

package.json

@@ -18,9 +18,12 @@
     "@next/mdx": "^11.1.0",
     "airtable-plus": "^1.0.4",
     "animated-value": "^0.2.4",
+    "animejs": "^3.2.1",
     "globby": "^11.0.4",
     "lodash": "^4.17.21",
     "next": "^11.1.0",
+    "next-compose-plugins": "^2.2.1",
+    "next-transpile-modules": "^8.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-masonry-css": "^1.0.16",