Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1366531

    HI
    My client doesn’t like the fly-in animation on the masonry gallery, and the “disable’ option isn’t right.
    Is there a way to make a fade-in animation on load/scroll?
    I put a fade-in animation on a 1/1 column with the masonry (.fade-masonry) inside, but that only works if you are already scrolled to it.
    I have some codes but neither of them work:

    .fade-masonry .av-inner-masonry {
    	opacity: 1;
    	animation-name: fadeInOpacity!important; 
    	animation-iteration-count: 1!important; 
    	animation-timing-function: ease-in !important; 
    	animation-duration: 2s!important; 
    }
    
    @keyframes fadeInOpacity {
    	0% {
    		opacity: 0;
    	}
    	100% {
    		opacity: 1;
    	}
    }
    
    /*OR*/
    
    .avia_desktop.avia_transform3d .av-masonry-animation-active .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
        -webkit-animation: fade-masonry 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075);
        animation: fade-masonry 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075);
    }

    any ideas?
    thanks
    Nancy

    • This topic was modified 2 years, 2 months ago by Munford.
    • This topic was modified 2 years, 2 months ago by Munford.
    #1366667

    Hey Munford,

    Thank you for the inquiry.

    You can actually override the default masonry animation with the following css code. Just add it in the Quick CSS field or in the style.css file.

    
    @-webkit-keyframes avia_masonry_show {
      0% {
        opacity: 0.1;
      }
    
      100% {
        opacity: 1;
      }
    }
    
    @keyframes avia_masonry_show {
      0% {
        opacity: 0.1;
      }
    
      100% {
        opacity: 1;
      }
    }
    

    This is the default avia_masonry_show animation in the css > shortcodes.css file.

    /*pop up animation*/
    @-webkit-keyframes avia_masonry_show {
      0%   { -webkit-transform:translateZ(300px) translateY(200px) rotateX(-70deg); opacity: 0.1;  }
      100% { -webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
    }
    @keyframes avia_masonry_show {
      0%   { transform:translateZ(300px) translateY(200px) rotateX(-70deg); opacity: 0.1;  }
      100% { transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1;  }
    }
    
    

    Best regards,
    Ismael

    #1366676

    Hi Ismael
    I tried that first code but still see the animation, and delaying until I scoll down the page.
    Is there a way to do a fade in on page load?
    thanks for your help
    Nancy

    #1366942

    Hi Nancy,

    Please add following code to bottom of Quick CSS field

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

    and then set animation on your column element to fade in :)

    Best regards,
    Yigit

    #1367136

    that looks better, thanks.
    Though I see a flickering white edge on the gallery when I hover over the images even though the background is set to black. (link in private content)

    I have another question:
    Is it possible to have the images in the masonry all the same height but are displayed with their original height and width ratio, instead of the same width?
    thanks for your help
    Nancy

    • This reply was modified 2 years, 2 months ago by Munford.
    #1367517

    Hi,

    Thank you for the update.

    1.) Adding this css code should help with the flicker.

    .main_color .av-masonry-pagination, .main_color .av-masonry-pagination:hover, .main_color .av-masonry-outerimage-container {
        background-color: #000000;
    }
    

    2.) This is not possible by default, unfortunately, A masonry gallery item can be either landscape or portrait, which depends on its size and aspect ratio (16:9). You have to set the Styling > Masonry Settings > Size Settings to Perfect Automatic Masonry for this to work.

    Best regards,
    Ismael

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