Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Open
wants to merge 1 commit into from

4 participants

@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".

Screenshot

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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 3 additions and 2 deletions.
  1. +3 −2 js/jquery.scrollorama.js
View
5 js/jquery.scrollorama.js
@@ -101,6 +101,7 @@
function onScrollorama() {
var scrollTop = $(window).scrollTop(),
currBlockIndex = getCurrBlockIndex(scrollTop),
+ wheight = $(window).height(),
i, j, anim, startAnimPos, endAnimPos, animPercent, animVal;
// update all animations
@@ -135,7 +136,7 @@
}
// otherwise, set values per scroll position
- if (i === currBlockIndex || (currBlockIndex === i-1 && anim.baseline === 'bottom')) {
+ if (blocks[i].top + blocks[i].block.height() >= scrollTop && blocks[i].top <= (scrollTop + wheight)) {
// if block gets pinned, set position fixed
if (blocks[i].pin && currBlockIndex === i) {
blocks[i].block
@@ -145,7 +146,7 @@
// set start and end animation positions
startAnimPos = blocks[i].top + anim.delay;
- if (anim.baseline === 'bottom') { startAnimPos -= $(window).height(); }
+ if (anim.baseline === 'bottom') { startAnimPos -= wheight; }
endAnimPos = startAnimPos + anim.duration;
// if scroll is before start of animation, set to start value
Something went wrong with that request. Please try again.