Go ahead and start scrolling

Here's what I've got for you

I've spent a little while learning how to do this pretty well. It took some practice, but these side by side components with custom animations are second nature to me now. That's why as you scroll, that sphere seems to rotate.

Okay, if you haven't already

Go ahead and hover your mouse over those bubblegum bubbles if you're on desktop, and tap on them if you're on a mobile device. You'll find nothing but clean interactions and animations that feel consistent across every device you view it on.

Alright we've reached the end of this section

I hope you've enjoyed my take on this modern design. When you move on to the sections below this, you'll see a few more of my favorite design implementations!

pretty cool right? now you can hover away or tap again to return to your normal scrolling!

This is one of my favorites!

This side by side component with a fixed image scrolling behind is an excellent example of parallax animation. it is incredibly simple to implement for desktop, but it does take some customization for mobile. check it out!

Someone walking with ripped white jeans holding a leather jacket.
Someone walking with ripped white jeans holding a leather jacket.

I love it because of the depth it gives to designs. It takes a very very short time to implement, and brings an immersive feel to whoever it is scrolling through these components.

you can change the background too!

If you switch the background every few sections, it gives an even better flow to your project! You can use staggered sections to walk users through a story of some kind

Person holding red and pink tone flowers in front of their face
Person holding red and pink tone flowers in front of their face

And then at the very end,

you can go ahead and give the user a full width section to reveal the whole picture!

Site developer, John Wheeler smiling in an alley wearing a denim jacket