Background Change Animation

Hi,

I’m wondering how a background animation, such as this : https://www.joelomax.co.uk/
is possible when scrolling on a site.

I understand this is a vague question, I’d be happy to provide any more information if required,
thanks for reading!

  • Cameron

I’m not sure I understood what you wanna do.

Did you mean create a regular web site that have vertical scroll, but when scrolling the background would have an animation like this?

Or did you mean have an animation that follows the cursor and still be able to scroll down the page?

Either options are doable using Webflow, and neither are that hard to do!

When the website first loads, there’s about 12 white columns that each go from bottom to top of the screen to reveal the page and the content and when you click say ‘INFO’, the animation of the background kind of dropping in the same transition to reveal the page

Oh, now I see it. When I clicked the first time I didn’t watched the load animation.

That’s kinda easy to do on load. You’ll just need to animate some div blocks with position: absolute or position: fixed in the background and play around the z-index to make the foreground elements apear on top of the rectangles.

To make this work on page change you’ll have to get some custom code to delay the new page until the animation is done. I’m sure I saw this custom code delay in some @PixelGeek Youtube video.

Thanks for the PixelGeek recommendation, found the video on his YouTube page :slight_smile: Linked below if anyone else comes across this in the future.