https://github.com/promo/scrollissimo
Javascript plugin for smooth scroll-controlled animations
https://github.com/promo/scrollissimo
animation greensock gsap scrolling smooth smooth-animations smooth-scrolling smoothing smoothscroll tween
Last synced: 3 months ago
JSON representation
Javascript plugin for smooth scroll-controlled animations
- Host: GitHub
- URL: https://github.com/promo/scrollissimo
- Owner: Promo
- Created: 2015-03-26T13:47:52.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2019-10-29T13:48:45.000Z (about 6 years ago)
- Last Synced: 2025-10-22T12:53:33.657Z (3 months ago)
- Topics: animation, greensock, gsap, scrolling, smooth, smooth-animations, smooth-scrolling, smoothing, smoothscroll, tween
- Language: JavaScript
- Homepage: http://promo.github.io/scrollissimo/
- Size: 1.43 MB
- Stars: 189
- Watchers: 9
- Forks: 38
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://travis-ci.org/Promo/scrollissimo)
Javascript plugin for smooth scroll-controlled animations
Scrollissimo animates Greensock's tweens and timelines on user's scroll.
Comparing Scrollissimo and another usual plugins [here](http://promo.github.io/scrollissimo/examples/paperfly).
## Get started
### Download
Scrollissimo is available for downloading from repository. Also npm users can install Scrollissimo by command:
```bash
npm install scrollissimo
```
### Connect
The first step you need is to include Greensock:
```html
```
... or just:
```html
```
... and Scrollissimo of course:
```html
```
Next we will trigger scrollissimo on each scroll event:
```html
$(document).ready(function(){
$(window).scroll(function(){
scrollissimo.knock();
});
});
```
**NOTE:** for touch devices support you must also attach scrollissimo.touch.min.js.
### Now lets animate something!
Let we have a div called *Divy*:
```html
```
```css
#Divy{
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 50px;
background: red;
}
```
Now we will animate Divy's width. At the begining of page its width will be equal to 50px. And as we scroll its width will be grow up to 300px after we have scrolled for 1000 pixels.
The first let's create Grensock's tween.
**```TweenLite.to(element:object, durationInPixels: number, params: object);```**
more in [Greensock`s documentation](http://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/)
```js
var divyTween = TweenLite.to(document.getElementById('Divy'), 1000, { width: 300 });
```
**NOTE:** As you see it\`s usual Greensock\`s Tween except of duration of animation ***must be specified in pixels not in seconds.
Then we need to add this tween to Scrollissimo.
**```scrollissimo.add(, , );```**
The second argument is start scroll value in pixels.
The third argument is a maximal value of changing scrollTop.
```js
scrollissimo.add(divyTween, 0, 25);
```
That is all you need to do to make a simple animation.
Animating timelines is similar to tween`s animating.
[travis-url]: http://travis-ci.org/Promo/scrollissimo
[travis-image]: http://img.shields.io/travis/Promo/scrollissimo.svg?branch=master