A template where one can switch between little image that are scattered around the page. The images animate to a once an “explore” link is clicked.

Animated-Grids-Layout_Featured

Today we’d like to share another CSS grid-powered template with you. The idea is to show a navigation and some scattered images in the background that have a slight parallax effect. Once the “explore” link is clicked, the seemingly randomly placed items animate to their final position in a grid. Each grid has its own unique layout. Once the animation is done, the whole thing becomes scrollable and a content area shows beneath the grid.

The animations are powered by TweenMax.

Initially, we show a navigation where the first item is selected. The preview of the image grid items is shown which are randomly scattered over the viewport:

Animated-Grids-Layout_01

When we click on another navigation item, we switch the grid preview by vertically animating the images and squishing them a bit. Depending on the position of the navigation item, we either move the images up or down.

AnimatedGridsLayout

Once we click on the “explore” link, the menu items disappear and all images start to animate to their position in a grid. The scale up and become brighter. The page is now scrollable and we can view the content beneath the grid.
Animated-Grids-Layout_02

Clicking on the top arrow will bring us back to the preview state with the navigation.

We hope you like this little effect and find it useful!

References and Credits

Previous:



Source link https://tympanus.net//2018/10/31/-grids-layout/

LEAVE A REPLY

Please enter your comment!
Please enter your name here