Lazy loading with Freewall

[vinayraghu]

Hello, thanks for the awesome plugin. We are trying to incorporate freewall pinterest layout with lazy loading. I have enabled the animations and I have a problem. Everytime a new image loads, it calls the fitWidth() method and all the images animate.

Expectation is that only the particular element that is being loaded should be animated. I can understand why this is happening. But I was hoping you would have a workaround for the same.

Disabling animation helps but I would like to retain the effect. Is there any known workaround?

[kombai]

Hi, You can disable the animation when the first time called.

wall.reset({
 animate: true,
 ....
 onComplete: function() {
   wall.reset({
     animate: false 
   });
 }
});

other way you can using css3 animation for control it. Same this example: http://vnjs.net/www/project/freewall/example/css-animate.html

.free-wall .cell[data-state="init"] {
                display: none;
            }

            .free-wall .cell[data-state="start"]  {
                display: block;
                animation: start 0.5s;
                -webkit-animation: start 0.5s;
            }

            .free-wall .cell[data-state="move"]  {
                transition: top 0.5s, left 0.5s, width 0.5s, height 0.5s;
                -webkit-transition: top 0.5s, left 0.5s, width 0.5s, height 0.5s;
            }

Hopy it can help you.

[vinayraghu]

Thanks for your prompt response...let me try this and get back to you

[vinayraghu]

Wanted to leave you a quick update. This method and the example provided suited perfectly for the required question. However, the animations were slowing our page down heavily. Trying to work around that. Thanks!