From our sponsor: Leverage AI for dynamic, custom website builds with ease.
In the past couple of weeks we have been exploring a lot of scroll-based animations. Especially layouts with images are super interesting when changed on scroll. Today I’d like to share yet another on-scroll exploration with you and this time, we add another dimension! It is inspired by the 3D grid animation seen on Inflection designed by Obys.
The idea is simple: place an image grid into 3D perspective and when we scroll the page, we transform the single grid items to follow an interesting motion flow. Randomizing the transforms can add another layer of interest here.
Depending on the grid layout we choose, the animations can be matched to create an interesting overall motion.
Here is a (very) short clip of how the first grid looks like on scroll:
