Tagged: animation, fade-in, image height, Masonry Gallery
-
AuthorPosts
-
September 27, 2022 at 12:49 pm #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
NancySeptember 28, 2022 at 9:23 am #1366667Hey 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,
IsmaelSeptember 28, 2022 at 10:11 am #1366676Hi 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
NancySeptember 29, 2022 at 4:21 pm #1366942Hi 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,
YigitSeptember 30, 2022 at 4:53 pm #1367136that 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.
October 4, 2022 at 9:06 am #1367517Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.