I was searching a few libraries for scroll animations and I found a very good npm package called @ashthornton/asscroll and I wanted to use the same on my react project.
But I am not been able to implement the same. It's not working the way it should. Can someone help me implement the same package in react?
Here, are the links for asscroll package and a Codesandbox for anyone to give it a try.
import React from "react";
import ASScroll from "@ashthornton/asscroll";
import "./styles.css";
class App extends React.Component {
componentDidMount() {
const pageEl = document.querySelector(".page");
this.asscroll = new ASScroll({
// containerElement: '.my-container',
scrollElements: pageEl,
ease: 0.1,
touchEase: 1,
customScrollbar: true,
scrollbarEl: ".my-scrollbar",
scrollbarHandleEl: ".my-scrollbar-handle",
scrollbarStyles: true,
disableNativeScrollbar: true,
touchScrollType: "scrollTop",
disableRaf: true,
disableResize: true,
limitLerpRate: true,
blockScrollClass: ".asscroll-block"
});
this.asscroll.enable();
requestAnimationFrame(this.onRaf);
}
onRaf = () => {
this.asscroll.update();
requestAnimationFrame(this.onRaf);
};
render() {
return (
<div asscroll-container="true">
<div class="page">
<img
src="https://raw.githubusercontent.com/ashthornton-gc/asscroll/master/docs/banner.jpg"
alt=""
/>
<div class="content">
<h1 class="title">
<span>A</span>
<span>S</span>
<span>S</span>
<span>C</span>
<span>R</span>
<span>O</span>
<span>L</span>
<span>L</span>
<span></span>
</h1>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
ornare quis nibh eget convallis. Nam aliquam tempus dolor, at
blandit elit vulputate eu. Mauris iaculis sem at nulla euismod
auctor. Duis dui risus, lacinia quis fringilla a, dictum a
lectus. Aliquam id dui a nisi dignissim aliquet nec sed augue.
Vestibulum congue felis sit amet iaculis scelerisque. Vivamus
facilisis lacus sit amet eros eleifend dapibus in eget neque.
Aliquam nisi urna, porttitor et nisi in, pretium lacinia orci.
Cras vitae leo posuere, condimentum magna et, vulputate mi.
Nullam maximus ullamcorper leo eu auctor. Quisque eget fermentum
est, aliquet cursus libero. Sed scelerisque mauris sed enim
tristique tempus ornare vestibulum quam. Etiam eget aliquam
augue. In nec lectus convallis, lobortis risus in, euismod
lorem. Sed eleifend nisi ut lorem convallis, nec blandit ante
egestas.
</p>
<p>
Quisque quis tincidunt nunc. In magna est, malesuada quis tempus
id, fermentum eleifend urna. Fusce facilisis rhoncus nibh, eget
pellentesque mauris rhoncus ut. Nulla congue vel lacus nec
pellentesque. Praesent eget elit nisi. Ut eu enim arcu. Duis et
nisi ligula. Maecenas eu ante eget augue pulvinar efficitur.
Aenean vitae luctus dolor. Ut iaculis orci ut orci tincidunt, id
efficitur nulla accumsan. Nullam feugiat porta hendrerit.
Pellentesque eget fringilla leo. Quisque laoreet ligula quis
consectetur aliquam.
</p>
<p>
Nam vel auctor nisl. Cras vel suscipit nibh. Donec nec massa
sagittis, vehicula magna ac, scelerisque velit. Etiam mollis
felis orci, id placerat ipsum egestas a. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Aenean faucibus vulputate feugiat. Nam condimentum
arcu urna, id tincidunt nisl rhoncus quis. Duis mauris mi,
dapibus et nisl at, facilisis tristique lectus. Nam vel felis in
metus hendrerit placerat ac quis massa. Nam eget turpis nunc.
Nullam at tincidunt lacus. Nulla viverra magna in nisi semper,
non interdum nunc tempus. In pellentesque porttitor bibendum.
Vestibulum blandit congue tempor.
</p>
<p>
Cras congue, nunc et imperdiet porttitor, dui nisl ultricies
ipsum, sed bibendum neque leo auctor sem. Nam velit ipsum,
dictum eget dolor pellentesque, pulvinar imperdiet purus.
Quisque leo dui, eleifend non porttitor quis, auctor convallis
tortor. Integer vel justo at odio suscipit gravida vitae ut
tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sapien urna, iaculis quis magna at, facilisis ultrices
elit. Maecenas ac elementum metus, sit amet congue nunc.
Maecenas vitae posuere lectus. Integer maximus neque at nunc
vestibulum imperdiet. Aenean imperdiet ligula semper nibh
dapibus facilisis. Pellentesque gravida dignissim lacus, et
vulputate sapien dapibus commodo. Etiam efficitur facilisis
sollicitudin. Quisque velit nulla, condimentum ac tellus eget,
rutrum placerat ipsum. Cras auctor auctor sem sed ullamcorper.
</p>
</div>
</div>
</div>
</div>
);
}
}
export default App;
In order to run it with react you need to initialize ASScroll inside useEffect and also make sure to point out which div element is asscroll-container.
Since this is a little different in react you need to add to the div asscroll-container="true" (keep in mind that true has to be passed as string).
I have added this library to my codesandbox as you can see here
