Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 29, 2018 at 9:58 pm #948723
    intimadecom

    Hello guys,
    as the topic says i’m looking for a way to change that “fly in” effect of a masonry gallery into “fade in” – is this possible?
    Thanks in advance,
    Vincent

    April 30, 2018 at 1:19 pm #949057
    Mike

    Hey intimadecom,
    I recommend adding a custom class to your masonry element, by going to Enfold Theme Options > Layour Builder > Show element options for developers, in this example I used the class “fade-masonry”
    Then try this code in the General Styling > Quick CSS field:

    .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;
	}
}

    Best regards,
    Mike

    May 7, 2018 at 10:16 am #952564
    intimadecom

    Thank you again, and sorry for that late reply.

    May 7, 2018 at 4:32 pm #952740
    intimadecom

    Ok, thats almost what i wanted… it works like, when i give the masonry gallery the predefined effect in its settings to fade in.
    but on first load, with a fresh cache, the images are loading slowly, while the fade effect is finished.
    is there an option to do the effect, when pictures are loaded?

    May 7, 2018 at 10:22 pm #952941
    intimadecom

    have set the thumbnails of the gallery to a lower res via simple image size plugin – now it’s fine! thank you :-)

    May 8, 2018 at 6:13 am #953113
    Victoria

    Hi intimadecom,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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