Scroll Animations for Image Grids

Some ideas for scroll animations for image grids powered by Locomotive Scroll.
By in Playground on
ScrollAnimationLocomotive
View demo Download Source

From our sponsor: Ship fast and never break a thing with Shortcut (formerly Clubhouse.io).

The other day I looked at the beautiful website of Elias & Valentin and fell in love with that nice tilted image grid that animates on scroll. The look and feel of a grid like that is super fashionable right now so I wanted to explore this and other layout variations I stumbled upon.

For the scroll animations I used Locomotive Scroll which is a really fantastic library when it comes to smooth scrolling and on-scroll animations.

The tilted grid from Elias & Valentin allows for a fun play with the directions of the animation.
Another interesting layout to play with is a 3D grid.
One line “grids” can simply be animated horizontally.

Check out the GitHub repo of Locomotive Scroll to see how simple it is to use the library.

I really hope you find this set interesting and useful 🙂

Find this project on Github

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

HorizontalScroll_featured

Horizontal Smooth Scroll Layouts

MotionGrid_featured

How to Create a Motion Hover Effect for a Background Image Grid

IntroImageStackAnimation_featured

Image Stack Intro Animation

Stay up to date with the latest web design and development news and relevant updates from Codrops.