Scroll-animations NPM

SCROLL ANIMATION FOR SMOOTH SCROLLBAR

JavaScript plugin that implement AOS and Relax animations on scrolling with Smooth Scrollbar

DEPENDENCIES

Smooth Scrollbar
AOS - aos.css
TweenMax (GSAP - GreenSock Animation Platform)

HOW USE

Download or git clone

git clone https://github.com/BiserStoilov/scroll-animations.git

Install dependencies
```
npm install
```
Run demo
```
npm run demo
```
Build production with dependencies
```
npm run build
```

Run plugin

<body data-aos-easing="ease-in-out" data-aos-duration="1000" data-aos-delay="100">
    <div id="scroll-animation-content">
        <div data-type-animation="aos" data-aos="fade-up"></div>
        <div data-type-animation="parallax"></div>
        <div data-type-animation="parallax" data-parallax-speed="10"></div>
    </div>
</body>

import scrollAnimations from 'path/to/scroll-animations/src/index'; 
const sa = scrollAnimations({
    element: '#scroll-animation-content'
});

Public methods

// Get Smooth Scrollbar instance
const smoothScrollBar = sa.getScrollBar();
// Destroy
sa.destroy();

Smoot ScrollBar Methods

const sa = scrollAnimations({
    element: '#scroll-animation-content'
});
const smoothScrollBar = sa.getScrollBar();
const element = document.querySelector('#your-element');
smoothScrollBar.addListener(() => {
    console.log(smoothScrollBar.isVisible(element));
});

NPM

npm i scroll-animations

smooth scrollbar aos rellax parallax scroll animation effects

gsap smooth-scrollbar

@infinitebrahmanuniverse/nolb-scro @everything-registry/sub-chunk-2720

1.1.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago