HELP with masonry load/fade in problems - Support | Kriesi.at

Tagged: animation, fade-in, masonry

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
March 12, 2019 at 5:29 pm #1077870
Munford
Participant
I am opening a new thread on this.
On all my menu pages, the galleries are just not loading properly until you scroll the section past the header, but on the test page below they load fine (until you get to the last section called NORAD which sometimes doesn’t load. I have tried all different options and can’t get them to load consistently. I just want a simple fade-in effect, with it loading when you first scroll down. Right now it looks like there is a blank page.
I have put the masonry inside a 1/1 column with the animation “fade in” selected, but it seems like it doesn’t load until you scroll beyond the top of the element, and/or it jumps around after it loads. (see links below)
Is there another way to do this?

I have also tried to do it with some code you gave me, https://kriesi.at/support/topic/featured-video-in-masonry-gallery/#post-1076257, using the css name “fadeingallery” and this:
```
.avia_desktop.avia_transform3d .av-masonry-animation-active .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
    -webkit-animation: fadeingallery 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075);
    animation: fadeingallery 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075);
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
```
but that doesn’t work so I disabled it. I can’t tell what is causing the masonry elements to not load on the page. Is there something in the css that is conflicting?
can you help me with this again? I’m getting confused. I checked my caching plugins and disabled an extra one but that didn’t change it.

I really need some help with this.
Thanks
Nancy
- This topic was modified 5 years, 8 months ago by Munford.
March 17, 2019 at 9:46 pm #1079715
Mike
Moderator
Hey Munford,
Sorry for the late reply, I was able to see the issue on your homepage, I also saw that you have many javascript errors:
```
Uncaught TypeError: Cannot read property 'ready' of undefined
    at l (froogaloop2.min.js:1)
```
this seems related to your video header.
typically when javascript gives an error it doesn’t skip to the next command easily, it will often hang on the error.
Perhaps correcting the errors will help.

Best regards,
Mike
March 17, 2019 at 10:55 pm #1079733
Munford
Participant
HI MIke
thanks for your reply. I don’t understand what those javascript errors mean –
I am using the advanced slider to put a video background at the top of my pages.
can you help me with that? I am following the guidelines on Vimeo for doing this, and
can’t find much about the error online that helps –
I looked at this: https://kriesi.at/support/topic/vimeo-avia-js-error/ but it didn’t seem to help when I added it to my code:
from`<iframe class=”vimeo” src=”https://player.vimeo.com/video/316121925?&background=1&muted=1″ style=”position:relative;top:0;left:0;width:100vw;height:56.25vw;” webkitallowfullscreen=”” mozallowfullscreen=”” allowfullscreen=”” frameborder=”0″></iframe>
to
<iframe class=”vimeo” src=”https://player.vimeo.com/video/316121925?api=1&background=1&muted=1″ style=”position:relative;top:0;left:0;width:100vw;height:56.25vw;” webkitallowfullscreen=”” mozallowfullscreen=”” allowfullscreen=”” frameborder=”0″></iframe>`
if I was doing that correctly?

Thanks
Nancy
- This reply was modified 5 years, 8 months ago by Munford.
March 20, 2019 at 4:57 am #1080649

Mike
Moderator

Hi,
Sorry for the late reply, I created a template of your “Real stories. Well told.” page and created a test page where I was able to reproduce the error and I then systemically removed every element in every combination to isolate the error and I found that the error only occurs when the two layersliders are together on the same page.
Actually any two video sliders will cause the error, even if they are the same.

So this confurms the GitHub issue you found and that was never solved, the final suggestion was to block the script from loading.
But I would say that this issue is not causing your masonry issue because that error still occurs with one slider and no slider error.
So at this point, perhaps updating the theme will help. Luckily today the dev team has released the update for Enfold v4.5.5 which has many bug fixes, please try updating your site to see if that corrects it.

Best regards,
Mike

March 20, 2019 at 11:59 am #1080784
Munford
Participant
HI Mike
thanks for all your work…
I did a test and it seems like the gallery loads fine if there is only one slider on the page. I set it up with a different menu on mobile, and it seems to be working fine. The landing page is the same on PC and mobile since i can’t see how to change that logo link to something different on the mobile, but that page seems to load OK anyway with 2 sliders on the page. Is there a way to designate a different landing page on mobile in case I run into issues with that page?

I am still seeing errors in the layer slider videos although they are different than they were before. see https://imgur.com/wAQAddP
Should I be concerned about these?
best regards
Nancy
- This reply was modified 5 years, 8 months ago by Munford.
March 21, 2019 at 2:35 am #1081121
Mike
Moderator
Hi,
I took a look at the error and is from the vimeo player, again. From reseaching this I would say that we can’t change this, and not to worry.
I’m glad you were able to get this sorted out.
You can load a different page for mobile devices with this function in your functions.php:
```
//* Redirect homepage on mobile
add_action( 'wp_head', 'wps_params', 10 );
function wps_params() {
    ?>
    
	<script>
	if (window.location.pathname == '/' && jQuery(window).width() <= 480) {
	   window.location = "/webshop/";
	}
	</script>

    <?php
}
```
Please adjust the page to suit.
Another option is to use this plugin that will give you more options: Equivalent Mobile Redirect

Best regards,
Mike
March 21, 2019 at 12:34 pm #1081354

Munford
Participant

thanks so much. I think it is all OK now.

March 21, 2019 at 12:55 pm #1081357

Mike
Moderator

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
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
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘HELP with masonry load/fade in problems’ is closed to new replies.