Ask DN: How are Layer Vault's homepage animations done?

5 years ago from , Entrepreneur

I really love the animations Layer Vault uses for their homepage. They seem to load much quicker than any other animations I've seen on the web. Pretty much instantly.

Does anyone have any insight into how this is possible? Is this a common technique I've just never seen before? Thanks!


  • Tierney CyrenTierney Cyren, 5 years ago (edited 5 years ago )

    If you Inspect Element (in Chrome), you will see that the animations contained in video tags. The formats they use are MP4 and WebM.

    4 points
    • Ryan LeFevreRyan LeFevre, 5 years ago (edited 5 years ago )

      Yep, they're just videos. In the last iteration of the site, they were paper.js based animations done on canvas elements though.

      4 points
      • Michael Collins, 5 years ago

        Thanks! Simple enough.

        0 points
      • Matt BaxterMatt Baxter, 5 years ago

        Any specific reason for the switch?

        3 points
        • Kelly SuttonKelly Sutton, 5 years ago

          paper.js is great for a lot of things, but not for the amount of personality we wanted in these animations. (If you remember previous, we did a lot of stuff with colored bubbles. That was a perfect application for paper.js.)

          We didn't go with GIFs, because those didn't give us the quality or the filesize we wanted. You also can't pause GIFs. In the end, we went with tags, which is never as easy as it should be.

          2 points
      • Jim NielsenJim Nielsen, 5 years ago

        What software did you use to produce the videos?

        0 points
      • Luke ChesserLuke Chesser, 5 years ago

        Do you guys also use paper.js for the cosmos animation?

        0 points