A tutorial on how to achieve the grid loading effect seen on the “Design Samsung” site. The effect will show a colored element sliding in first and then sliding out again, revealing the image.
If you already come across the Samsung Corporate Design Center, you certainly have noticed the stylish grid loading effect. The colored background of an item slides in first and when it slides out again to the opposite side, the image is revealed. The color of the sliding element represents the image, i.e. it is colored in the dominant color of the picture. This is a great grid loading effect and after we got a request on how to achieve this, we’d like to show you how to recreate this effect using a Masonry grid with CSS animations. We’ll also make use of the ColorFinder script by pieroxy that will get the most prominent color of an image for us.
The idea is to load grid images showing a swiping animation of a colored element first. For that we’ll dynamically add a division that we’ll color with the most prominent color of the associated image and then we’ll animate that element to reveal the image. We’ll add an animation that looks like the one seen on the Samsung site and we’ll also add two more, a swipe to the bottom and a swipe rotation.