Masonry element only loads when scrolling the page – bug?

Hey lebenspraxis,

I can’t reproduce that on my end using Chrome, in which browser are you seeing that? Also, are you sure that you are not getting cached results?

Best regards,
Rikard

Hi,
I believe you are referring to the masonry animation, please try this code in the General Styling > Quick CSS field to remove:

.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
-webkit-animation: none !important; 
-moz-animation: none !important; 
animation: none !important; 
}

.av-masonry-entry {
opacity: 1 !important;
visibility: visible !important;
}

Best regards,
Mike

Hi,
Try adding this code to the end of your functions.php file in Appearance > Editor:

function scroll_on_load(){
	?>
	<script>
jQuery(document).ready(function($) {
	$('html, body.page-id-480').animate({
        scrollTop: (5)
    }, 'slow');
});
</script>
<?php
}
add_action('wp_footer', 'scroll_on_load');

It has be written to only work on your blog page.

Best regards,
Mike

Hi,
I checked and it is working for me, with Chrome.
Perhaps try clearing your browser cache.

Best regards,
Mike

Hi,
Strange, I tested with Chrome, Firefox, Edge & IE11 and found it working.
Try changing the line:
scrollTop: (5)
to:
scrollTop: (10)

Just to make sure we are looking at the same thing I made a video in the Private Content area, watch for the masonry blog posts at the bottom of the page on page load. The video was made in Windows 10 Edge.

Best regards,
Mike

Hi,
Well it’s not working for me today, strange and now you have a new error.

seems something has changed with your site, were you using this caching plugin when we started working on this? Have you added anything new?
I wanted to see the code in your functions.php, but your editor is disabled, can you enable it or do you add your code another way?

Best regards,
Mike

Hi,
Thank you for that. I found that our screens are a little different in sizes, so on my screen the masonry was up a little more to trigger the animation, while on your screen was not.
So I did two things to correct, first I added the code to a code block on the page to ensure it would trigger. Second I removed 20px of top margin from the special heading via WordPress > Customize > Additional CSS, to bring the masonry up just a little so it will work, or at least I think it will for you now.
Please check, Thank you.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
And if there are features that you wish Enfold had, you can request them and vote the requested ones here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

Best regards,
Mike