Masonry animation start when in viewport

Hello,
I’m trying to reproduce a page like this one: https://www.juliedecubber.com/bijoux/
I’ve easily changed the animation type with css:

.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
	animation-name: masonryFadeIn;
}
@keyframes masonryFadeIn{
	0%{top:40px;opacity:0}
	100%{top:0;opacity:1}
}

What I can’t achieve is to make the items start their animation when in viewport, not before. Enfold uses this kind of behaviour on many components so I’m wondering if there is a simple way to do this?