Skip to main content

ALL DAY LONG part 1: concept

· One min read

Implementing the animation.

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

Concept​

In a nutshell, the animation consists of the following elements:

  • In gray, the .container, the root 3D context. It is static, rotated in the X, Y, and Z axes, so the ribbon appears tilted in perspective.
  • In red, the .fragment-wrapper, child of .container. It is animated, moves from top to bottom, flipping at each border.
  • In green, the .fragment, child of .fragment-wrapper. It is static, translated along the Z axis, above .fragment-wrapper.
  • In blue, the .fragment::after, child of .fragment. It is static, rotated in the Y axis, behind .fragment.

The motion path of the animation follows a stadium geometry.


In the final animation, only the .fragment elements and their .fragment::after pseudo-elements are visible. Many of them are used to form a complete ribbon. Each .fragment and .fragment::after have a slice of the front.png and back.png images, respectively.

Result​

Check the creation of the images in the next post.