├── .gitignore ├── README.md ├── demo ├── assets │ ├── css │ │ └── scrollAnimation.css │ └── img │ │ └── background.jpg ├── index.html └── src │ ├── css │ └── style.sass │ └── js │ └── demo.js ├── package.json ├── src └── index.js ├── webpack.build.js └── webpack.demo.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | build 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SCROLL ANIMATION FOR SMOOTH SCROLLBAR 2 | 3 | JavaScript plugin that implement [AOS](https://github.com/michalsnik/aos) and [Relax](https://github.com/dixonandmoe/rellax) animations on scrolling with Smooth Scrollbar 4 | 5 | ## DEPENDENCIES 6 | 7 | - [Smooth Scrollbar](https://github.com/idiotWu/smooth-scrollbar) 8 | - [AOS](https://github.com/michalsnik/aos) - aos.css 9 | - [TweenMax (GSAP - GreenSock Animation Platform)](https://github.com/greensock/GreenSock-JS) 10 | 11 | ## HOW USE 12 | 13 | 1. Download or git clone 14 | ```bash 15 | git clone https://github.com/BiserStoilov/scroll-animations.git 16 | ``` 17 | 1. Install dependencies 18 | ```bash 19 | npm install 20 | ``` 21 | 1. Run demo 22 | ```bash 23 | npm run demo 24 | ``` 25 | 1. Build production with dependencies 26 | ```bash 27 | npm run build 28 | ``` 29 | 1. Run plugin 30 | 31 | ```html 32 | 33 |

34 |

35 |

36 |

37 |

38 | 39 | ``` 40 | 41 | ```javascript 42 | import scrollAnimations from 'path/to/scroll-animations/src/index'; 43 | const sa = scrollAnimations({ 44 | element: '#scroll-animation-content' 45 | }); 46 | ``` 47 | 48 | 1. Public methods 49 | 50 | ```javascript 51 | // Get Smooth Scrollbar instance 52 | const smoothScrollBar = sa.getScrollBar(); 53 | // Destroy 54 | sa.destroy(); 55 | ``` 56 | 1. Smoot ScrollBar Methods 57 | ```javascript 58 | const sa = scrollAnimations({ 59 | element: '#scroll-animation-content' 60 | }); 61 | const smoothScrollBar = sa.getScrollBar(); 62 | const element = document.querySelector('#your-element'); 63 | smoothScrollBar.addListener(() => { 64 | console.log(smoothScrollBar.isVisible(element)); 65 | }); 66 | ``` 67 | 68 | ## NPM 69 | 70 | ```bash 71 | npm i scroll-animations 72 | ``` 73 | -------------------------------------------------------------------------------- /demo/assets/css/scrollAnimation.css: -------------------------------------------------------------------------------- 1 | [data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos]{pointer-events:none}[data-aos].aos-animate{pointer-events:auto}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}@media screen{html:not(.no-js) [data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;-webkit-transform:none;transform:none}html:not(.no-js) [data-aos=fade-up]{-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}html:not(.no-js) [data-aos=fade-down]{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}html:not(.no-js) [data-aos=fade-right]{-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}html:not(.no-js) [data-aos=fade-left]{-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0)}html:not(.no-js) [data-aos=fade-up-right]{-webkit-transform:translate3d(-100px,100px,0);transform:translate3d(-100px,100px,0)}html:not(.no-js) [data-aos=fade-up-left]{-webkit-transform:translate3d(100px,100px,0);transform:translate3d(100px,100px,0)}html:not(.no-js) [data-aos=fade-down-right]{-webkit-transform:translate3d(-100px,-100px,0);transform:translate3d(-100px,-100px,0)}html:not(.no-js) [data-aos=fade-down-left]{-webkit-transform:translate3d(100px,-100px,0);transform:translate3d(100px,-100px,0)}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)}html:not(.no-js) [data-aos=zoom-in]{-webkit-transform:scale(.6);transform:scale(.6)}html:not(.no-js) [data-aos=zoom-in-up]{-webkit-transform:translate3d(0,100px,0) scale(.6);transform:translate3d(0,100px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-down]{-webkit-transform:translate3d(0,-100px,0) scale(.6);transform:translate3d(0,-100px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-right]{-webkit-transform:translate3d(-100px,0,0) scale(.6);transform:translate3d(-100px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-left]{-webkit-transform:translate3d(100px,0,0) scale(.6);transform:translate3d(100px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-out]{-webkit-transform:scale(1.2);transform:scale(1.2)}html:not(.no-js) [data-aos=zoom-out-up]{-webkit-transform:translate3d(0,100px,0) scale(1.2);transform:translate3d(0,100px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-down]{-webkit-transform:translate3d(0,-100px,0) scale(1.2);transform:translate3d(0,-100px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-right]{-webkit-transform:translate3d(-100px,0,0) scale(1.2);transform:translate3d(-100px,0,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-left]{-webkit-transform:translate3d(100px,0,0) scale(1.2);transform:translate3d(100px,0,0) scale(1.2)}html:not(.no-js) [data-aos^=slide][data-aos^=slide]{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;visibility:hidden}html:not(.no-js) [data-aos^=slide][data-aos^=slide].aos-animate{visibility:visible;-webkit-transform:translateZ(0);transform:translateZ(0)}html:not(.no-js) [data-aos=slide-up]{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}html:not(.no-js) [data-aos=slide-down]{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}html:not(.no-js) [data-aos=slide-right]{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}html:not(.no-js) [data-aos=slide-left]{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}html:not(.no-js) [data-aos^=flip][data-aos^=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}html:not(.no-js) [data-aos=flip-left]{-webkit-transform:perspective(2500px) rotateY(-100deg);transform:perspective(2500px) rotateY(-100deg)}html:not(.no-js) [data-aos=flip-left].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-right]{-webkit-transform:perspective(2500px) rotateY(100deg);transform:perspective(2500px) rotateY(100deg)}html:not(.no-js) [data-aos=flip-right].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-up]{-webkit-transform:perspective(2500px) rotateX(-100deg);transform:perspective(2500px) rotateX(-100deg)}html:not(.no-js) [data-aos=flip-up].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}html:not(.no-js) [data-aos=flip-down]{-webkit-transform:perspective(2500px) rotateX(100deg);transform:perspective(2500px) rotateX(100deg)}html:not(.no-js) [data-aos=flip-down].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}} -------------------------------------------------------------------------------- /demo/assets/img/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BiserStoilov/scroll-animations/993b61462abb9f219090e5fc8778553ee20d6912/demo/assets/img/background.jpg -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | SCROLL ANIMATIONS FOR SMOOTH SCROLLBAR 7 | 8 | 9 | 10 | 11 | 12 |

13 |

14 |

15 |

16 |

17 | SCROLL ANIMATIONS FOR 18 | SMOOTH SCROLLBAR 19 |

20 |

21 |

RELAX

22 |

23 |

24 |

DEFAULT SPEED: 5

25 |

26 |

27 |

28 |

29 |

30 | CUSTOM SPEED: 10
Check the console to see if this element is visible! 31 |

32 |

33 |

34 |

AOS

35 |

36 |

37 |

FADE UP

38 |

39 |

40 |

41 |

42 |

ZOOM IN

43 |

44 |

45 |

46 |

47 |

FADE RIGHT

48 |

49 |

50 |

51 |

52 |

FADE LEFT

53 |

54 |

55 |

56 |

57 |

FLIP LEFT

58 |

59 |

60 |

61 |

62 |

FLIP RIGHT

63 |

64 |

65 |

66 |

67 |

68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /demo/src/css/style.sass: -------------------------------------------------------------------------------- 1 | $color1: #FFFFFF 2 | $color2: #8a8a8a 3 | $color3: #4b4b4b 4 | html, body 5 | margin: 0 6 | padding: 0 7 | font-family: 'Roboto', sans-serif; 8 | color: $color2 9 | 10 | html 11 | background: url(/assets/img/background.jpg) no-repeat center center fixed 12 | -webkit-background-size: cover 13 | -moz-background-size: cover 14 | -o-background-size: cover 15 | background-size: cover 16 | 17 | .center 18 | position: fixed 19 | top: 100px 20 | bottom: 100px 21 | max-width: 1200px 22 | width: 100% 23 | left: 50% 24 | transform: translateX(-50%) 25 | background-color: rgba(255, 255, 255, .8) 26 | 27 | #scroll-animation-content 28 | width: 100% 29 | position: absolute 30 | top: 0 31 | bottom: 0 32 | 33 | .scroll-animation-content-in 34 | padding: 0 120px 35 | box-sizing: border-box 36 | 37 | h1 38 | position: absolute 39 | width: 100% 40 | text-align: center 41 | margin: 0 42 | top: 50% 43 | transform: translateY(-50%) 44 | 45 | h2 46 | margin: 50px 0 47 | 48 | p 49 | padding: 20px 0 50 | 51 | img 52 | width: auto 53 | max-height: 350px 54 | 55 | a 56 | text-decoration: none 57 | color: $color2 58 | border-bottom: 1px dashed $color2 59 | max-height: 350px 60 | 61 | a:hover 62 | border-bottom: 1px solid $color2 63 | 64 | .title 65 | position: relative 66 | 67 | .animate-container-for-aos 68 | height: 200px 69 | margin: 50px 0 70 | 71 | .animate-container-for-rellax 72 | display: table 73 | position: relative 74 | max-width: 250px 75 | width: 100% 76 | height: 300px 77 | margin: 50px 0 78 | 79 | .float-right-height 80 | height: 300px 81 | 82 | .animate-box-for-aos 83 | max-width: 350px 84 | width: 100% 85 | height: 200px 86 | display: table 87 | background-color: $color3 88 | color: $color1 89 | border: 10px solid $color1 90 | box-sizing: border-box 91 | 92 | .animate-box-for-rellax 93 | max-width: 250px 94 | width: 100% 95 | height: 350px 96 | background-color: $color3 97 | color: $color1 98 | border: 10px solid $color1 99 | box-sizing: border-box 100 | 101 | .animate-box-for-aos-in 102 | display: table-cell 103 | vertical-align: middle 104 | text-align: center 105 | padding: 0 10px 106 | 107 | .animate-box-for-rellax-in 108 | position: absolute 109 | top: 50% 110 | transform: translateY(-50%) 111 | color: $color2 112 | 113 | .animate-box-for-rellax-in-left 114 | right: -20px 115 | 116 | .animate-box-for-rellax-in-right 117 | left: -20px 118 | 119 | .float-right 120 | float: right 121 | 122 | .margin-top-fix 123 | margin-top: 200px -------------------------------------------------------------------------------- /demo/src/js/demo.js: -------------------------------------------------------------------------------- 1 | import scrollAnimations from '../../../src/index'; 2 | const sa = scrollAnimations({ 3 | element: '#scroll-animation-content' 4 | }); 5 | const parent = document.querySelector('.center'); 6 | window.addEventListener('resize', () => { 7 | TweenMax.set(['#scroll-animation-content', '.title'], { height: parent.clientHeight }); 8 | }); 9 | const smoothScrollBar = sa.getScrollBar(); 10 | const element = document.querySelector('#test'); 11 | smoothScrollBar.addListener(() => { 12 | console.log(smoothScrollBar.isVisible(element)); 13 | }); 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scroll-animations", 3 | "version": "1.1.0", 4 | "description": "Scroll animations for Smooth Scroll Bar", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "node_modules/.bin/webpack --config webpack.build", 8 | "demo": "node_modules/.bin/webpack-dev-server --inline --hot --open --config webpack.demo" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/BiserStoilov/scroll-animations.git" 13 | }, 14 | "keywords": [ 15 | "smooth scrollbar", 16 | "aos", 17 | "rellax", 18 | "parallax", 19 | "scroll", 20 | "animation", 21 | "effects" 22 | ], 23 | "author": "Biser Stoilov", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/BiserStoilov/scroll-animations/issues" 27 | }, 28 | "homepage": "https://github.com/BiserStoilov/scroll-animations#readme", 29 | "devDependencies": { 30 | "@babel/core": "^7.5.5", 31 | "@babel/plugin-proposal-class-properties": "^7.5.5", 32 | "@babel/plugin-syntax-dynamic-import": "^7.2.0", 33 | "@babel/preset-env": "^7.5.5", 34 | "babel-loader": "^8.0.6", 35 | "css-hot-loader": "^1.4.4", 36 | "css-loader": "^3.1.0", 37 | "file-loader": "^4.1.0", 38 | "image-webpack-loader": "^5.0.0", 39 | "mini-css-extract-plugin": "^0.8.0", 40 | "node-sass": "^4.12.0", 41 | "optimize-css-assets-webpack-plugin": "^5.0.3", 42 | "path": "^0.12.7", 43 | "sass-loader": "^7.1.0", 44 | "uglifyjs-webpack-plugin": "^2.2.0", 45 | "url-loader": "^2.1.0", 46 | "webpack": "^4.39.0", 47 | "webpack-cli": "^3.3.6", 48 | "webpack-dev-server": "^3.7.2", 49 | "webpack-node-externals": "^1.7.2" 50 | }, 51 | "dependencies": { 52 | "gsap": "^2.1.3", 53 | "smooth-scrollbar": "^8.4.0" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Scrollbar from 'smooth-scrollbar'; 2 | import { TweenMax } from 'gsap'; 3 | 4 | const ScrollAnimations = data => { 5 | const options = { 6 | scrollBarOptions: { 7 | damping: 0.08, 8 | thumbMinSize: 3 9 | }, 10 | scrollBarMobileSpeed: 0.3, 11 | parallaxSpeed: 5 12 | }; 13 | 14 | const variables = {}; 15 | 16 | const init = () => { 17 | if (data.element !== undefined) { 18 | setVariables(); 19 | setTypeAnimation(); 20 | setScrollBar(); 21 | resize(); 22 | setTimeout(() => { 23 | window.dispatchEvent(new Event('resize')); 24 | }, 10); 25 | setTimeout(() => { 26 | window.dispatchEvent(new Event('resize')); 27 | }, 20); 28 | } else { 29 | console.error('Set an element!'); 30 | } 31 | }; 32 | 33 | const classManipulate = { 34 | has: (element, className) => { 35 | return new RegExp(' ' + className + ' ').test( 36 | ' ' + element.className + ' ' 37 | ); 38 | }, 39 | 40 | add: (element, className) => { 41 | if (!classManipulate.has(element, className)) { 42 | element.className += ' ' + className; 43 | } 44 | }, 45 | 46 | remove: (element, className) => { 47 | let newClass = 48 | ' ' + element.className.replace(/[\t\r\n]/g, ' ') + ' '; 49 | if (classManipulate.has(element, className)) { 50 | while (newClass.indexOf(' ' + className + ' ') >= 0) { 51 | newClass = newClass.replace(' ' + className + ' ', ' '); 52 | } 53 | element.className = newClass.replace(/^\s+|\s+$/g, ''); 54 | } 55 | } 56 | }; 57 | 58 | const isMobile = () => { 59 | if ( 60 | navigator.userAgent.match(/Android/i) || 61 | navigator.userAgent.match(/webOS/i) || 62 | navigator.userAgent.match(/iPhone/i) || 63 | navigator.userAgent.match(/iPad/i) || 64 | navigator.userAgent.match(/iPod/i) || 65 | navigator.userAgent.match(/BlackBerry/i) || 66 | navigator.userAgent.match(/Windows Phone/i) 67 | ) { 68 | return true; 69 | } else { 70 | return false; 71 | } 72 | }; 73 | 74 | const setVariables = () => { 75 | variables.element = document.querySelector(data.element); 76 | variables.scrollBarOptions = data.scrollBarOptions 77 | ? data.scrollBarOptions 78 | : options.scrollBarOptions; 79 | variables.scrollBarMobileSpeed = options.scrollBarMobileSpeed; 80 | variables.elements = variables.element.querySelectorAll( 81 | '[data-type-animation]' 82 | ); 83 | variables.parentElements = []; 84 | for (let a = 0; a < variables.elements.length; a++) { 85 | variables.parentElements[a] = variables.elements[a].parentElement; 86 | } 87 | variables.parallaxSpeed = data.parallaxSpeed 88 | ? data.parallaxSpeed 89 | : options.parallaxSpeed; 90 | }; 91 | 92 | const setTypeAnimation = () => { 93 | variables.typeAnimation = {}; 94 | variables.speedParallax = {}; 95 | for (let a = 0; a < variables.elements.length; a++) { 96 | variables.typeAnimation[a] = variables.elements[a].getAttribute( 97 | 'data-type-animation' 98 | ); 99 | if (variables.typeAnimation[a] === 'parallax') { 100 | variables.speedParallax[a] = variables.elements[a].getAttribute( 101 | 'data-parallax-speed' 102 | ) 103 | ? variables.elements[a].getAttribute('data-parallax-speed') 104 | : variables.parallaxSpeed; 105 | } 106 | } 107 | }; 108 | 109 | const setScrollBar = () => { 110 | variables.parentPos = variables.element.getBoundingClientRect(); 111 | variables.elementPos = {}; 112 | variables.elementTop = {}; 113 | variables.realPosition = {}; 114 | if (isMobile() === true) { 115 | class MobilePlugin extends ScrollbarPlugin { 116 | static pluginName = 'mobile'; 117 | static defaultOptions = { 118 | speed: variables.scrollBarMobileSpeed 119 | }; 120 | transformDelta(delta, fromEvent) { 121 | if (fromEvent.type !== 'touchend') { 122 | return delta; 123 | } 124 | 125 | return { 126 | x: delta.x * this.options.speed, 127 | y: delta.y * this.options.speed 128 | }; 129 | } 130 | } 131 | Scrollbar.use(MobilePlugin); 132 | } 133 | variables.scrollBar = Scrollbar.init( 134 | variables.element, 135 | variables.scrollBarOptions 136 | ); 137 | let position = 0, 138 | direction, 139 | isVisible; 140 | variables.scrollBar.addListener(status => { 141 | if (status.offset.y > position) { 142 | direction = 'down'; 143 | } else { 144 | direction = 'up'; 145 | } 146 | position = status.offset.y; 147 | for (let a = 0; a < variables.elements.length; a++) { 148 | isVisible = variables.scrollBar.isVisible( 149 | variables.parentElements[a] 150 | ); 151 | if (variables.typeAnimation[a] === 'parallax' && isVisible) { 152 | variables.elementPos[a] = variables.elements[ 153 | a 154 | ].getBoundingClientRect(); 155 | variables.elementTop[a] = 156 | variables.elementPos[a].top - variables.parentPos.top; 157 | variables.realPosition = 158 | variables.elementTop[a] - 159 | variables.parentPos.height / 2 + 160 | variables.elementPos[a].height / 2; 161 | TweenMax.set(variables.elements[a], { 162 | y: variables.realPosition / variables.speedParallax[a] 163 | }); 164 | } else if ( 165 | variables.typeAnimation[a] === 'aos' && 166 | isVisible && 167 | direction === 'down' 168 | ) { 169 | classManipulate.add(variables.elements[a], 'aos-animate'); 170 | } else if ( 171 | variables.typeAnimation[a] === 'aos' && 172 | !isVisible && 173 | variables.elements[a].getBoundingClientRect().top > 0 174 | ) { 175 | classManipulate.remove( 176 | variables.elements[a], 177 | 'aos-animate' 178 | ); 179 | } 180 | } 181 | }); 182 | }; 183 | 184 | const windowResize = () => { 185 | variables.parentPos = variables.element.getBoundingClientRect(); 186 | let isVisible; 187 | for (let a = 0; a < variables.elements.length; a++) { 188 | if (variables.typeAnimation[a] === 'parallax') { 189 | isVisible = variables.scrollBar.isVisible( 190 | variables.parentElements[a] 191 | ); 192 | if (isVisible) { 193 | variables.elementPos[a] = variables.elements[ 194 | a 195 | ].getBoundingClientRect(); 196 | variables.elementTop[a] = 197 | variables.elementPos[a].top - variables.parentPos.top; 198 | variables.realPosition = 199 | variables.elementTop[a] - 200 | variables.parentPos.height / 2 + 201 | variables.elementPos[a].height / 2; 202 | TweenMax.set(variables.elements[a], { 203 | y: variables.realPosition / variables.speedParallax[a] 204 | }); 205 | } 206 | } 207 | } 208 | }; 209 | 210 | const resize = () => { 211 | window.addEventListener('resize', windowResize); 212 | }; 213 | 214 | return { 215 | init: () => { 216 | init(); 217 | }, 218 | publicMethods: { 219 | destroy: () => { 220 | window.removeEventListener('resize', windowResize); 221 | Scrollbar.destroy(variables.element); 222 | }, 223 | getScrollBar: () => { 224 | return variables.scrollBar; 225 | } 226 | } 227 | }; 228 | }; 229 | 230 | const scrollAnimations = data => { 231 | const scrollAnimations = new ScrollAnimations(data); 232 | scrollAnimations.init(); 233 | return scrollAnimations.publicMethods; 234 | }; 235 | 236 | export default scrollAnimations; 237 | -------------------------------------------------------------------------------- /webpack.build.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); 3 | 4 | const mode = 'production'; 5 | const entry = './src/index.js'; 6 | const output = { 7 | filename: 'scrollAnimation.js', 8 | path: path.resolve(__dirname, 'build'), 9 | libraryExport: 'default', 10 | library: 'scrollAnimation' 11 | }; 12 | const modules = { 13 | rules: [ 14 | { 15 | test: /\.js$/, 16 | loader: 'babel-loader', 17 | exclude: /node_modules/, 18 | options: { 19 | presets: ['@babel/preset-env'], 20 | plugins: [ 21 | '@babel/plugin-proposal-class-properties', 22 | '@babel/plugin-syntax-dynamic-import' 23 | ] 24 | } 25 | } 26 | ] 27 | }; 28 | const target = 'node'; 29 | const optimization = { 30 | minimizer: [ 31 | new UglifyJSPlugin({ 32 | cache: true, 33 | parallel: true 34 | }), 35 | ] 36 | }; 37 | const plugins = []; 38 | 39 | module.exports = { 40 | mode: mode, 41 | target: target, 42 | entry: entry, 43 | output: output, 44 | module: modules, 45 | optimization: optimization, 46 | plugins: plugins 47 | }; 48 | -------------------------------------------------------------------------------- /webpack.demo.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); 3 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 4 | const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); 5 | 6 | 7 | const mode = 'development'; 8 | const entry = ['./demo/src/js/demo.js', './demo/src/css/style.sass']; 9 | const output = { 10 | filename: 'js/[name].js', 11 | path: path.resolve(__dirname, "demo/dist"), 12 | publicPath: '/demo/' 13 | }; 14 | const modules = { 15 | rules: [ 16 | { 17 | test: /\.js$/, 18 | loader: 'babel-loader', 19 | options: { 20 | presets: ["@babel/preset-env"], 21 | plugins: [ 22 | '@babel/plugin-proposal-class-properties', 23 | '@babel/plugin-syntax-dynamic-import' 24 | ] 25 | } 26 | }, 27 | { 28 | test: /\.(sass|scss)$/, 29 | use: [ 30 | 'css-hot-loader', 31 | MiniCssExtractPlugin.loader, 32 | 'css-loader', 'sass-loader', 33 | ] 34 | } 35 | ] 36 | }; 37 | const devServer = { 38 | contentBase: './demo/' 39 | }; 40 | const plugins = [ 41 | new MiniCssExtractPlugin({ 42 | filename: './css/style.css' 43 | }) 44 | ]; 45 | 46 | 47 | module.exports = { 48 | mode: mode, 49 | entry: entry, 50 | output: output, 51 | module: modules, 52 | plugins: plugins, 53 | devServer: devServer 54 | }; 55 | --------------------------------------------------------------------------------