Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #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.
    #1225441
    #1225452

    Hi 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

    #1225499

    i 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.

    #1225515

    Thank 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

    #1225594

    Hi Franzgiot,

    Can you disable caching and minification for now?

    Best regards,
    Victoria

    #1225602

    Hi Victoria,

    I don’t have any activated yet.

    Regards

    François

    #1225628

    Hi Franzgiot,

    Please go to Theme options > Performance and disable css and JavaScript merging.

    Best regards,
    Victoria

    #1225630

    Hi,

    Ok it’s done

    François

    #1225731

    Yesterday 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.

    #1225743

    Indeed 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

    #1225958

    the “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.

    #1225959

    so 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.
    #1225965

    ps – 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-651948

    you 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.

    #1225970

    i 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%'} );

    #1225971

    Oh wow thank you for all this I will check and let you know

    Again thank you

    Regards,

    François

    #1226075

    Ok 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

    #1226167

    Hi 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

Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.