I built a scroll-based animated website for XELEVEN, my metaverse, web3, and digital art studio. We have a slogan we use in the office, “we make the internet less boring.”

Why is it that most websites you visit are boring and flat?

99.9% of websites are something that you could print out and hand to someone to read. “oh you don’t have a computer? no worries I’ll just print the site out for you to read!”

I want to make the user’s web experience immersive as if they were playing a game.

Not only is this fun, but it keeps the user engaged and they visit the site for longer, perhaps they even share it with friends because it was a fun experience!

When users spend a long time on a page Google and other search engines know this! And it can help to rank a site higher!

How did I build the scroll-based animated website?

With the help of 3D artist, Stacie Ant, we conceptualized a 3D world. Stacie animated the character flying through the scene.

I was then able to use a JavaScript library called ThreeJS to open the 3D world in the browser. Next, I connected the mouse scroll event to the playback of the animation.

To make it more interesting I used some simple trigonometry to animate the camera t undulate left to right. I thought this helped to create a more dreamy and floaty experience.

That’s all you have to do to create a scroll-based animated website!

If you want me to build a scroll-based animated website for you, reach out to me at aaron@xeleven.tech