Skip to main content

ALL DAY LONG introduction: 3D animation with HTML, CSS, and JS

· One min read

A short introduction to explain the idea.

ALL DAY LONG (7 part series)
  1. Introduction
  2. Concept
  3. Images
  4. HTML
  5. CSS
  6. JS
  7. Conclusion

Introduction​

This animation is a coded recreation of Franziska Volmer's All Day Long design. The visual effect is a looping ribbon that flips continuously around a pill-shaped path. The effect is not built with WebGL or canvas, it is composed entirely of DOM elements, CSS transforms, and the Web Animations API.

I've separated the implementation into a few posts:

Result​

Check the animation concept in the next post.