Untitled Case Study - CSS Animations with React

  1. Initial Version

    The initial version is the work that I sent just to give back something. It employs plain old CSS animations, fixed sizes, absolute positioning, ... The purpose was solely to provide something.

    /demos/initial-version/

    See the "initial-version" demo!

  2. Abstract Version

    Surprisingly, the initial version has passed. Then, I began working on the same project without any constraints or considerations regarding time limits or design.

    This was the most challenging part of the work. Specifically, it involved building up a layout for a rather sloppy Figma design. Here, you'll see a fully functional layout with no animations.

    /demos/abstract-version/

    See the "abstract-version" demo!

  3. Framer Motion

    And this one is the framer-motion adaptation of the abstract version. The idea was to build upon the solid foundation established by the abstract version and then integrate any other animation library on top of it. Miraculously 😜, learning framer-motion and applying animations proved to be the easiest part of the entire process. Who would have thought? Our "brilliant" designers often rely on flashy animations as a crutch to mask their crappy layout designs.

    /demos/framer-motion/

    See the "framer-motion" demo!