While working on the design for Nich Estes’ website, I had an idea that I would make a unique hover feature that I’d never seen before. With that came a few challenges, such as whether to use SMIL animations which are being antiquated or to use CSS animations that I’d define myself. Well, I tried both of them. I was able to achieve my desired effect very easily with SMIL animation properties, but there were some other issues that I quickly ran into. 

One of the issues that I ran into pretty quickly was that I couldn’t really control the animation based off of a hover event while using SMIL. With that, I decided to switch to CSS animations. I ran into a few problems doing this, but ultimately got them worked out. There are some other things I’d change about this going forward such as cleaning up the mouseout transition as well as some other minor changes. Have a look at the example on CodePen. I’ve also added the code below for those interested 🙂

body {
  background-color: #343434;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  min-height: 100vh;
}

.imageContainer {
  flex: 0 0 70%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .imageToHover {
    flex: 1 0 25%;
    margin: 1rem;
    height: 14rem;
    background-position: center;
    background-size: cover;
    background-color: white;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    svg {  
      width: 100%;
      height: 100%;
      position: absolute;
      transform: scale(1.5);
      opacity: 0;
      left: 4rem;
      .animatedSVG {
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
        stroke-width: 0;
        // animation-play-state: running;
        // -webkit-animation: remove;
      }
    }
    &:hover {
      svg {
        opacity: 1;
        .animatedSVG {
          animation-play-state: running;
        }
        #rect1  { animation: fill 1s ease-in-out 0s forwards; }
        #rect2  { animation: fill 1s ease-in-out .25s forwards; }
        #rect3  { animation: fill 1s ease-in-out .5s forwards; }
        #rect4  { animation: fill 1s ease-in-out .75s forwards; }
        #rect5  { animation: fill 1s ease-in-out 1s forwards; }
        #rect6  { animation: fill 1s ease-in-out 1.25s forwards; }
        #rect7  { animation: fill 1s ease-in-out 1.5s forwards; }
        #rect8  { animation: fill 1s ease-in-out 1.75s forwards; }
        #rect9  { animation: fill 1s ease-in-out 2s forwards; }
        #rect10 { animation: fill 1s ease-in-out 2.25s forwards; }
        #rect11 { animation: fill 1s ease-in-out 2.5s forwards; }
        #rect12 { animation: fill 1s ease-in-out 2.75s forwards; }
        #rect13 { animation: fill 1s ease-in-out 3s forwards; }
        #rect14 { animation: fill 1s ease-in-out 3.25s forwards; }
        #rect15 { animation: fill 1s ease-in-out 3.5s forwards; }
      }
    }
  }
}

@-webkit-keyframes fill {
  from { fill: rgba(255,29,142,0);}
  to {fill: rgba(255, 29, 142, 1);}
}

@-webkit-keyframes remove {
  from { fill: rgba(255,29,142,1); }
  to { fill: rgba(255,29,142,0); }
}