Pageclip: a server for your HTML forms(pageclip.co)

almost 3 years ago from Ben Ogle

  • Alvaro Ruiz, almost 3 years ago

    Great! looks fantastic. I am curious about how the animation in the homepage is made, could you provide some info about it? Thanks

    1 point
    • Ben OgleBen Ogle, almost 3 years ago

      Thanks! It's all CSS keyframe animation, and it's broken up into 3 parts: The site on the left, the pipe, and the site on the right. The three parts are separate, and just look seamless because they match up on timing. You can actually see that when the pink dot hits the pipe, it doesnt always match up with the pipe's pink dot!

      It was a good amount of work actually. It made me realize CSS animations arent very good for animating scenes as each element must be animated separately, and must have a keyframe setup for the entire scene animation duration. e.g. if you just want to have an element move for 1 second, then wait for 3, that has to be encoded into the keyframes.

      0 points
      • Alvaro Ruiz, almost 3 years ago

        Did you use any special software to do that? or coded directly using a code editor? Any source to learn to do that kind of animations? I am more into the graphics that's why I would love to learn to do that! Thanks

        0 points