Sliding / Scrolling Animation with Infinite Items

programming
1

by kirupa | 14 May 2018

A fun effect that adds a little bit of quirkiness to your page is a sliding (or scrolling) animation that looks as follows:

This is a companion discussion topic for the original entry at https://www.kirupa.com/animations/infinite_sliding_animation.htm
2

Yes fun, but I wouldn’t necessarily categorize it as quirky. The “overflow:hidden;” technique is widely used for a myriad of nice effects when coupled with CSS / JS animations. Between it and various clip/path techniques web peeps can create some really engaging and immersive experiences (Flash-esque). You could probably do an entire tutorial series concerning these effect methods of animation techniques and approaches. I do see some relative existing ones that are in the tutorials you’ve already made. :wink:

3

Removed the quirkiness phrasing haha. Totally agree.

I forgot that the forums get an auto-post of even in progress tutorials if I accidentally preview in the browser. It is a boring long story for why that is. Anyway, I finished the tutorial just a few moments ago, and I did make some big edits since you may have last seen it :stuck_out_tongue:

1 Like