alternative animation function for about-timeline

site/assets/js/utils/scrollmove.js

@@ -1,27 +1,33 @@
-//import 'https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js';
+import { animate, onScroll } from 'animejs';
 
 
 export default function() {
 
-  if (window.innerWidth < 768) return;
-
-  const scrollEl = document.querySelector('.scrollmove');
-
-  if (!scrollEl) return;
-
-    const container  = scrollEl.parentElement
-
-  // get element widths
-  const scrollElWidth = scrollEl.scrollWidth - container.clientWidth;
-
-  scrollEl.animate(
-   { transform: ['translateX(0%)','translateX(-' + scrollElWidth + 'px)'] }, {
-    timeline: new ViewTimeline({ subject: container }),
-    rangeStart: { rangeName: 'contain', offset: CSS.percent(10) },
-    rangeEnd: { rangeName: 'contain', offset: CSS.percent(80) },
-    fill: 'both',
-  });
-
-
+    const scrollEl = document.querySelector('.scrollmove');
+    if (!scrollEl) return;
+
+    if (window.innerWidth < 768) return;
+
+    const container = scrollEl.parentElement;
+    let scrollElWidth = scrollEl.scrollWidth - container.clientWidth;
+
+    const animation = animate(scrollEl, {
+      x: `-${scrollElWidth}px`,
+      ease: 'linear',
+      autoplay: onScroll({
+        container: '.scroll-container',
+        enter: 'bottom-=50 bottom',
+        leave: 'top+=100 top',
+        sync: .9,
+        //debug: true,
+      })
+    });
+
+    // Update on resize
+  const recalculateWidth = () => {
+    scrollElWidth = scrollEl.scrollWidth - container.clientWidth;
+    animation.refresh();
+  };
+  window.addEventListener('resize', recalculateWidth);
 
 }

site/package.json

@@ -21,6 +21,7 @@
     "@thulite/bootstrap": "^1.2.2",
     "@thulite/images": "^3.3.3",
     "@thulite/seo": "^2.4.2",
+    "animejs": "^4.2.2",
     "exec-bin": "^1.0.0",
     "flickity": "^2.3.0",
     "flickity-fade": "^1.0.0",