The fast scroll action make that sometimes an element can have both past and future class.

Simply avoid it by removing the useless class systematically.

Hello! I really like your project, it has some pretty nice effects. Its just awesome!

While playing around at the demopage I noticed some issues with scrolling up and down very fast. In some cases a few items inside the viewport still animate or just disappear because they still have classnames applied. So I had a look at the code and I also noticed that you are using requestAnimationFrame to change the classList on every child node. The problem here is that the update function will be called over and over again even though the user is not scrolling.

I fixed the fast-scrolling-bug by adding a locking variable to the update function and I also fixed some tiny performance issues here and there. The big change I made was to use scroll events instead of using requestAnimationFrame so the update function will now only be called while the user is scrolling. Because of that I also had to change the TouchList and its swipe behavior. The swipe machanism still uses reqAnimFrame but only to reduce the velocity of the swipe...

Overall I've managed to storten the code (TouchList now uses List's sync() and update() method).

Please have a look at the changes and tell me what you think. Thanks!

Hello,

First of all sorry about my poor english. I can't play fade effect in my iPad but it works on web. The other effects works perfect but the fade effect no. Please help me.

If you want to use jQuery instead of native JavaScript (benefits: you can add items, less code and easier to read) use this code:

 $('ul#MyItemID').on('scroll', function (){
        var mh = $(this).height();
        $(this).children().each(function(){
            if ($(this).position().top < 0) {
                if(!$(this).hasClass('past')) 
                    $(this).addClass('past');
            } else {
                $(this).removeClass('past');
            }
            if ($(this).position().top > mh) {
                if(!$(this).hasClass('future')) 
                    $(this).addClass('future');
            } else {
                $(this).removeClass('future');
            }
        });
    });

I tried viewing your demo site on my iPhone 5 (iOS 6) inside a WebView in Tweetbot, and the scrolling simply did not work. It was like the site was broken.

There should be a fallback in a case like this where it's not working to go back to normal scrolling.

Hello, I love stroll.js and I am glad that I finally got to use it. However, it doesn't seem to be working when I include stroll.min.js, bind it to a list and its container, and add a class to the list that is the style of stroll; but, it seems to be behaving normally and not strolling on scroll.

Here is a link to a live example: https://dl.dropbox.com/u/270523/help/stroll/index.html

Update: I hadn't realised that I needed to add the stroll.min.css file. I did that, but it is still not working. Now, only the last

Yeah great, cool, awesome. But what about triggering this effects on mouse over. Don't really see the point with scrolling unless it's only for smart devices.

I simplified @paulirish's code by removing the WeakMap dependency. OffsetTop and offsetHeight are now cached as properties of the list items instead. Since we only caches numeric values this doesn't leak any memory and is equally fast.

Greetings,

Just a small fix to 'fourty' (should be 'forty') that I noticed as I was enjoying the thrill of zooming up and down. :)

Great library, btw. Thanks.

This plugin works fine when I make static list but when I tried to append content with creating dynamic li ,that time its not working.Please suggest me the solutions. I really wanna use this plugin.

Hey, maintainer(s) of hakimel/stroll.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library hakimel/stroll.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "hakimel/stroll.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo, twitter: @versioneye email: [email protected] VersionEye - no more legacy software!

html <div id='deck'> <div class='card flip'></div> <div class='card flip'></div> <div class='card flip'></div> </div> <script> stroll.bind($('#deck .card')); </script>

stroll.min.css .flip{...} .flip div.card{...} .flip div.card.past{...}

stroll.min.js if(!n.nodeName||/^(div|div)$/i.test(n.nodeName)===false){return false; }

thanks in advance :)

i use the stroll.js file and css file like what is said in readme.md,but in my page,it seems like implementation in the initialization time. and also

    <li style="opacity:1;">   
   <ul style="overfolw:hidden;">  

but when i scroll my page ,it doesn't work...i don't know what's wrong...