Constance Chan

Site v7, transitions

  • Save
Site v7, transitions clip-path text only primary colors clipping simple css animations transitions

I wanted a site that was very straightforward, with some transitional flourishes to keep it interesting. I went with 1 typeface (3 weights), 3 colors (RYB primary colors), no images, just text.

For the transitions, I wanted to have each page's content appear only as its background swipes through it. It works in Chrome (seen here!) but unfortunately Firefox doesn't support `clip-path` shapes :( I tried using an SVG `clip-path` to solve that, but of course Chrome has a bug which prevents it from rendering :(

Alas. So until one of those things is fixed (or I find another way to achieve this properly), a Dribbble shot will have to do and I'll settle for a transition I'm less thrilled about.

keyboard shortcuts: L or F like