search

jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.39k stars 2.26k forks source link

Only the half of the elements to be seen are shown. #352

Closed JQOz closed 7 years ago

JQOz commented 7 years ago

Hi,

Today I ran into a problem. Only the half of the elements to be seen are shown (screenshot below). I have to resize the browser vertically, then come the the other elements.

Any Ideas? Best Regards

I am using https://unpkg.com/scrollreveal@4.0.0-beta.5

window.sr = ScrollReveal({ 
    distance: '200px',
    duration: 600,
    delay: 150,
    opacity: 0.01,
    scale: 0.11,
    easing: 'ease-out',
    useDelay: 'onload',
    viewFactor: 0.11,
    viewOffset: { top: 48, right: 0, bottom: 0, left: 0 },
 });

sr.reveal('.move', 150);

bug-sr

jlmakes commented 7 years ago

Without a live demo, I can't effectively troubleshoot this.

In general, both scroll and resize event handlers check if elements are visible, and animate the ones that are. The difference is that resize first checks the size of elements, since that may changed during resize.

If resize is the only thing that triggers the hidden elements—it sounds like their size is being incorrectly captured on page load. If this is true, you may be calling reveal() before your page has finished loading. It’s hard to say while guessing.

If you inspect the sr.store.elements object in the console, you can see all the information ScrollReveal has about each of your elements.

screen shot 2017-06-16 at 2 57 51 pm

I recommend looking at the geometry property when your page loads, and after you resize the page. You can also compare the visible property with your expectations, to see if elements are correctly evaluated. Etc.

In general, if you have a problem, I recommend trying to understand what the store data looks like—especially if you can‘t provide a working demo of the problem. However, creating a JSBin that demonstrates the issue is the best way to receive support.

cobblehillmachine commented 7 years ago

I am seeing a similar issue (you can actually view it here , and it appears that the elements are not "visible" when they should be, which is odd because elements with the same styles are being revealed. @vicula

screen shot 2017-06-22 at 4 42 28 pm

jlmakes commented 7 years ago

Well this appears to be an issue on both v3 and v4, but it’s not something I’ve encountered before. After a look around the site (thanks for the live demo @Vicula) I don’t see what’s wrong.

I’ve modified v3 for you @Vicula with a public isElemVisible() method that will log most of its internal data; if there’s something wrong, I think it should show up there. If you don't mind, can you swap in this version of ScrollReveal and let me know when it’s live—I can then look another look and hopefully fix this!

cobblehillmachine commented 7 years ago

I switched out my version for the debug version. I ran some of the Li's with isElemVisible() and found that some of the elements that are being passed to _getOffset are undefined. I left the debug live so you can still go and look through it. @jlmakes screen shot 2017-06-23 at 10 06 50 am

jlmakes commented 7 years ago

@cobblehillmachine I believe I have found the issue.

This line at the bottom of confirmBounds() inside isElemVisible() seems a little off...

return top < viewBottom &&
    bottom > viewTop &&
    left > viewLeft && // this compares left to left?
    right < viewRight // this compares right to right?

Looking at this logic, and the output numbers, I believe it should operate like this

return top < viewBottom &&
    bottom > viewTop &&
    left < viewRight &&
    right > viewLeft

This follows the same convention, and in my tests, fixes the issue. However, this error in conditional logic is not present in v4—so if @AbrahamHalil is experiencing this issue on v4, it must be something different.

cobblehillmachine commented 7 years ago

I can confirm that @jlmakes 's solution fixed my problem. Thanks for the speedy response and all your help!

jlmakes commented 7 years ago

@cobblehillmachine I just patched to v3.3.6 which includes this fix.

Available at: https://unpkg.com/scrollreveal@3.3.6

@AbrahamHalil If you are still having this issue, can you please open a new issue with a live demonstration of the problem so it can be debugged? If a similar bug is also happening in v4, I would love to get this squashed.

cobblehillmachine commented 7 years ago

@jlmakes You left a console.log on line 172.

jlmakes commented 7 years ago

That was not added recently or left there by mistake. That is by design in version 3—it warns you when reveal() is called with a selector that matches no elements.

All I changed in the recent patch is the conditional logic fix.

In version 4 however, there is a debug flag to enabled/disable log messages. If you’re curious, you can see what’s different in v4.