search

jlmakes / scrollreveal

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

ScrollReveal with Masonry slight issue #475

Closed MariuzM closed 5 years ago

MariuzM commented 5 years ago

Hi first of all big thanks for this cool script!!!

I know it's not your scripts fault and i just blame myself for not knowing more how to code but trying to learn. So i have website that just loads bunch of images. So i'm using Masonry to get that look and ScrollReveal fade stuff. I have noticed especially when working in Chrome Dev mode + No Cache is that some of the images are not loaded correctly looks like they are on top of each other.

Here is the pic of the issue: https://www.dropbox.com/s/4t5vs0725g39hqa/Screenshot%202018-11-16%20at%2010.08.30.jpg?dl=0

Also made a video: https://www.dropbox.com/s/qzzbi6yrvv7mykr/Screen%20Recording%202018-11-16%20at%2010.53.25.mov?dl=0

Here is the full code HTML: ```php Photography
";}?>
``` CSS ```css * { box-sizing: border-box; } .grid:after { content: ''; display: block; clear: both; } .grid-sizer, .grid-item { width: 33.333%; } .grid-item { float: left; } .grid-item img { display: block; max-width: 100%; transition: all 0.2s linear; padding: 5px 5px; } .grid-item img:hover { box-shadow: 0px 0px 40px -1px #000000bf; transition: all 0.2s linear; } ``` JS ```js var $grid = $('.grid').masonry({ percentPosition: true, columnWidth: '.grid-sizer', itemSelector: '.grid-item' }); $grid.imagesLoaded().progress(function () { $grid.masonry(); }); ScrollReveal().reveal('.grid-item', { delay: 100, }); ```
jlmakes commented 5 years ago

Hey @MariuzM, I appreciate your patience and thank you for the detailed issue.

There is another issue concerning Chrome and cached images, so perhaps there is a browser bug...

Does this problem also happen in Firefox? Can you confirm that disabling ScrollReveal fixes the issue?

MariuzM commented 5 years ago

I have noticed this. When i disable the ScrollReveal of course i don't get the fade in effect. But i still get the images on top but in this case it only happens for 1-2 seconds and then it arranges itself correctly.

I think whats happening with SR (animation) + Masonry is that they both clash. I will try to think of something like a JS script to load Masonry first in background with Opacity 0 and then start SR after.

When i was testing yes i had the same issue on Firefox.

jlmakes commented 5 years ago

It doesn't sound ScrollReveal is the root of the issue @MariuzM.

Unloaded images can throw off Masonry layouts and cause item elements to overlap. — https://masonry.desandro.com/layout.html#imagesloaded

This makes sense, because unless you give images a fixed size, they typically increase in size dramatically once they finish loading. (This actually impacts ScrollReveal as well, since element size and position are essential in calculating whether or not it's within the viewport.) This is why the issue is more obvious with caching disabled.

The key here is to wait for your images to finish loading before invoking Masonry or ScrollReveal. It's up to you how to get this done, but the creator of Masonry does offer a solution: imagesLoaded

Good luck!