
-
AuthorPosts
-
June 25, 2020 at 10:18 am #1225434
Hi,
As you can see on this page (desktop version) if you scroll in the “Stages” Section you see that the masonry part show two products in the first row and three on the second one then if you scroll further it appears correctly i.e. three products in the first row and two in the second one.
Can you help me fixing this ?
Thank you.
Regards,
François
-
This topic was modified 5 years ago by
Franzgiot.
June 25, 2020 at 10:46 am #1225441i do not see your page – but it sounds very similar to that: https://kriesi.at/support/topic/shifting-a-masonry-gallery-image-to-the-left-when-scrolling-down-then-up/
June 25, 2020 at 11:21 am #1225452Hi thank you for this quick reply.
Unfortunately no it’s not the same problem. The page is this one : https://medianeartetcom.com/nos-coachings/
If I remove all my CSS I still have an issue when I’m scrolling.
Thank you,
Regards
François
June 25, 2020 at 2:12 pm #1225499i can see it too: but on firefox it is very rare – on Chrome and Safari i see it allways but not only on stages – on the other section i have this too.
You might even reduce the value of av-masonry-entry by a few tenths of a percent..av-masonry-col-3 .av-masonry-entry { width: 33.2%; }
Maybe it’s because of your very nice Captions presentation
this is hard to test only with developer tools because i had to reload the page to see the effect.
June 25, 2020 at 2:40 pm #1225515Thank you again for your reply but I add this as you can see and the issue is still there.
I really have the feeling that I have a problem with the scroll trigger.
If I add the CSS animation you can see that for ateliers and stages the masonry is loading only when you are in the bottom of the section.
Can you please try and check on your side if you have the same issue ?
Than you
François
June 25, 2020 at 4:57 pm #1225594Hi Franzgiot,
Can you disable caching and minification for now?
Best regards,
VictoriaJune 25, 2020 at 5:08 pm #1225602Hi Victoria,
I don’t have any activated yet.
Regards
François
June 25, 2020 at 5:38 pm #1225628Hi Franzgiot,
Please go to Theme options > Performance and disable css and JavaScript merging.
Best regards,
VictoriaJune 25, 2020 at 5:47 pm #1225630Hi,
Ok it’s done
François
June 26, 2020 at 7:23 am #1225731Yesterday you haven’t activated the animation effect of the masonries. ( that delayed animation when masonry comes into viewport )
And yesterday i have the described “bug” even sometimes on the other sections too – which would not support your supposition of the reason for this.June 26, 2020 at 9:10 am #1225743Indeed I activated the animation to check if you also have this strange behavior i.e. the animation for the stages section is loading only when you scroll on the bottom of this section.
Can you telle me if this behavior is normal?
Thank you
June 26, 2020 at 5:52 pm #1225958the “come into viewport” is correlated to the waypoint script i think. You can set a trigger point that has to be passed before the animation starts.
F.e. an offset of 50% ( means if the element passes the half of the viewport height – the animation starts. But in the consequence – if there is not enough content under the element to observe – the trigger can not be passed.For example: because waypoint script is allready implemented in enfold – we can use it for those scroll induced events
on this page here – look what happens to the green div when the footer comes 20% to viewport (80% offsetTop)
https://webers-testseite.de/pureinstall/brodes/This is a combination of animate.css ( Link ) hinge.
If you see my custom script:function scroll_up_down_change() { if(is_page( array( 630))) { ?> <script> (function($) { $('#kontaktbutton').addClass('animated'); var element_to_observe = $('#footer'); element_to_observe.waypoint(function(direction) { if (direction == 'up') { $('#kontaktbutton').addClass('hinge'); } else { $('#kontaktbutton').removeClass('hinge'); } $('#kontaktbutton').toggleClass('hinge'); }, { offset: '80%' }); })(jQuery); </script> <?php } } add_action('wp_footer', 'scroll_up_down_change', 30);
the observe element is: #footer – and the element to animate is : in this case that #kontaktbutton
So maybe we can influence the enfold script in a way that the trigger point is not at a low offset but on a higher one.June 26, 2020 at 5:54 pm #1225959so i think this is norml – and i avoid that on placing a white boarder on the bottom of that color-section : but that rearange of columns not – that is something different.
just for info: on masonry-entries.js line 257:
masonry.waypoint(start_animation , { offset: '80%'} );
and on shortcodes.js lines 217ff:
function activate_waypoints(container) { //activates simple css animations of the content once the user scrolls to an elements if($.fn.avia_waypoints) { if(typeof container == 'undefined'){ container = 'body';}; $('.avia_animate_when_visible', container).avia_waypoints(); $('.avia_animate_when_almost_visible', container).avia_waypoints({ offset: '80%'}); if(container == 'body') container = '.avia_desktop body'; $('.av-animated-generic', container).avia_waypoints({ offset: '95%'}); } }
Sadly i do not see any filter to change offset for a specific element ( f.e. custom-class or ID )
-
This reply was modified 5 years ago by
Guenni007.
June 26, 2020 at 6:23 pm #1225965ps – i found a solution to change it on general via child-theme function:
all credits goes @mensmaximus : https://kriesi.at/support/topic/animations-trigger-too-late/#post-651948you can do it as @mensmaximus described as external script or i think it could be done via child-theme functions.php as internal script.
Maybe this is nice – because you can load that with if clauses only on pages where you like to change it.But i think because of the extra setting on masonry-entries.js – this is not influenced.
– just brainstorming now to found a child-theme solution on changing the offset value for masonries.June 26, 2020 at 7:16 pm #1225970i think it will be best to have a child-theme masonry-entries.js file and load that via child-theme functions.php:
function wp_change_masonry_animation() { wp_deregister_script( 'avia-module-masonry' ); wp_enqueue_script( 'avia-module-masonry-child', get_stylesheet_directory_uri().'/js/masonry_entries.js', array( 'avia-module-isotope' ), false, true ); } add_action( 'wp_enqueue_scripts', 'wp_change_masonry_animation', 100 );
i think we even can load that only for specific sites by if-clauses.
then put the edited masonry-entries.js – into the child-theme/js/ folder
change the line 257 to f.e.:
masonry.waypoint(start_animation , { offset: '95%'} );
June 26, 2020 at 7:18 pm #1225971Oh wow thank you for all this I will check and let you know
Again thank you
Regards,
François
June 27, 2020 at 4:46 pm #1226075Ok I used your code but to do what I originally wanted i.e. load all the masonry without animation and without the glitch in the first row of products.
So it’s perfect
Thank you!
Regards,
François
June 28, 2020 at 3:43 am #1226167Hi François,
Great, I’m glad that @guenni007 could help you out. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard -
This topic was modified 5 years ago by
-
AuthorPosts
- You must be logged in to reply to this topic.