animating multiple elements: wrong progress

[im-n1]

Hi,

I do have this pattern:

<div
    class="category scrollme animateme"
    data-when="exit"
    data-from="0"
    data-to="0.8"
    data-opacity="0"
>
.... content about 200px high
</div>

When I put this element like 20 times bellow each other I've got pretty high column. When I scroll down, the first element is animated correct (start getting transparency when it's leaving the screen) but the more I scroll down, the sooner elements get transparency. The last ement in the column gets full transparency when it's like 20px from bottom of the screen.

Am I missing something or it's bug?

Thanks in advance.

[nckprsn]

Is the last element really close to the bottom of the document?

The scrolling boundaries of the animation are capped by the top and bottom of the document. This means that if you have an "exit" animation right at the bottom of a document then the height of the scrolling interval for the effect will be squished down pretty small, and vice versa for an "enter" animation at the top.

This isn't really a bug, it was done to ensure that all effect boundaries were within the scrolling height of the document so that each animation would always be covered in full. On reflection though it's probably something I should make into an option.

I've added the new option to my to-do list but in the meantime if you want to force the behavior you can do so by commenting out lines 227 and 228:

if( start < 0 ) start = 0;
if( end > ( body_height - viewport_height ) ) end = body_height - viewport_height;

[nckprsn]

Hi Pavel,

I've had a chance to add the new option - you should be able to get the behavior you're after by adding the data-crop attribute and setting it to false.

Let me know how it goes.

[im-n1]

Hi Nick,

I'm sorry I was busy in last days.

I've tried the new version with crop param and it worked! Awesome!

Thank you for your work Nick.