}

Tutorial: Recreate Apple’s Image Grid Scroll Animation in Webflow

Level:
Fortgeschritten 👍
Preview result
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Icon für einen externen Link
Open and clone in Webflow Designer
Icon für einen externen Link

In this web design tutorial, we build a scroll animation from apple.com in Webflow, which first shows the site visitor three large images in the viewport, which then fit into an image collage while scrolling and also move slightly parallax. Sounds complicated? Since the approach and thought process is important in such tutorials, I made sure in this video not to prepare anything and to leave all problems and mistakes in.
As a responsive solution on tablet and mobile devices, I set Flexbox to wrap and all images to 50% width. This gives us a total of four rows, which is okay, as websites on mobile devices tend to be viewed vertically and this creates more space in height.