I use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

Today, I want to explore how to create as simple as possible a horizontal scrolling component while dealing with the animations every time we scroll up or down.

COIDEA - Horizontal Scrolling with Animated Images

If you create websites, chances are you have been asked to create a horizontal scrolling component. By occasionally (and thoughtfully) breaking from user expectations, you can draw extra attention to particular areas of your site, and create a delightfully immersive experience a bit out of the norm. Intentional horizontal scrolling sections offer one powerful tool to use with this UX tactic and that's why your clients can ask you to create horizontal scrolling areas.

As said, today I want to make one experiment and try to quickly create a horizontal scrolling area with animated images. It is extremely easy to implement this using TimelineMax and ScrollMagic. Additionally, I added some images to show how to animate them every time we scroll up or down.

The inspiration for demo, design, and layout I found in a great dribble shot by BestServedBold. Link to this dribbble shot is in the "References and Credits" section at the bottom of the article.

I hope you liked my experiment and find it inspiring and useful!

References and Credits