How could make images smooth when resize the browser

[YvonneD]

Hi, It's awesome to layout the images. But how could the images smooth when I resize the browser,and with some fancy animations when loading images with javascript? Thanks

[jrmd]

To do this you could use css to target the elements that are completed e.g each masonry item will get data-macy-complete="1" on the element when its loaded.

To target this in css you can do this:

[data-macy-complete="1"] {
// styles
}

A more complete example, assuming the items in the container have a class of macy-item

.macy-item {
  opacity: 0;
  transform: translateY(15px);
}

.macy-item[data-macy-complete="1"] {
  opacity: 1;
  transform: translateY(0);
  transition: top .2s ease-in-out,left .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out;
}