Animate all blocks that are within the viewport, not just two

[frederickjansen]

Right now, only two blocks at any given time are being animated. On large screen resolutions or with small block sizes, this can cause animations to jump from their starting position to somewhere halfway through the animation. Or if you scroll really fast past an animation and then scroll slowly to it, you'll the animation stuck halfway and then jump to its initial position once it starts animating.

You can see this behaviour on your demo as well, especially with the word "easing".

This is the bottom of my screen and the animation is stuck somewhere below.

[marksyzm]

Maybe this should be set as a system wide option, so people with very complex and specific slides can disable this by choice OR have a value that allows you to increase the range i.e. 2 = 2 blocks before and after those within viewport, -1 = infinite blocks

[hirbod]

This Fix really made my day... thanks a lot!

[marksyzm]

Just tried it out... works really well and fixed a few issues for me too. Many thanks!

[frederickjansen]

You're both welcome. I still hope it makes it into the project, since it's John's most popular one when you look at stars.

[doughamlin]

@frederickjansen

This patch is causing an error for me:

Uncaught TypeError: Cannot call method 'animate' of undefined main.js:9
(anonymous function) main.js:9
(anonymous function) main.js:17

My main.js:

(function($) {
  var viewportHeight = $(window).height();
  var scrollorama = $.scrollorama({
    blocks: '.block',
    enablePin: false
  });
  scrollorama
    .animate('#dp1 label', { delay: 500, duration: viewportHeight*1.5, property: 'top', start: 218, end: 0 })
    .animate('#dp2 label', { delay: 150, duration: viewportHeight*1.5, property: 'top', start: 325, end: 0 })
    .animate('#b3', { delay: 150, duration: viewportHeight*1.5, property: 'background-position-y', start: 500, end: 0 })
    .animate('#dp3 label', { delay: 250, duration: viewportHeight*1.5, property: 'top', start: 225, end: 0 })
    .animate('#dp4 label', { delay: 250, duration: viewportHeight*1.5, property: 'top', start: 225, end: 0 })
    .animate('#dp5 label', { delay: 250, duration: viewportHeight*1.5, property: 'top', start: 225, end: 0 })
    .animate('#dp6 label', { delay: 250, duration: viewportHeight*1.5, property: 'top', start: 500, end: 0 })
    .animate('#dp7 label', { delay: 650, duration: viewportHeight*1.5, property: 'top', start: 500, end: 0 })
    .animate('#dp8 label', { delay: 1550, duration: viewportHeight*1.5, property: 'top', start: 500, end: 0 });
})(jQuery);