Create add-on package for animated icons

[kristastarr]

I have created animations of some of the Carbon Icons, to be used in the API Connect landing page. We would like to start an animation library to make the existing animations available for others to use, and to enable others to design and contribute additional animations.

Prototype of animations: https://pages.github.ibm.com/Krista-Starr/motion/#/landing-page
(hover on the tiles)

Animations are created using CSS and are of the form:

.trigger-selector:hover .icon-element-selector {
... some CSS
}
The user of the package could either use a pre-canned trigger selector e.g. .carbon-animate-icon:hover, or use an SCSS mix-in to apply the animation to a trigger-selector of their choice.

We would need to have classes added on svg elements, perhaps optionally based on a component switch, and ideally added by the icon builder code.

Credit to @lee-chase for the above implementation ideas.

[lee-chase]

Possible mixin implentation.

// library
@mixin carbon-animation--icon-develop() {
    .icon--develop {
      transition: 0.2s all;
      transform-origin: 50% 50%;
      height: 36px;
      width: 36px;
      transform: scale(1.02);
    }
    .pencil {
      will-change: transform;
    }
    &:hover .pencil {
      animation: carbon-animation--icon-develop 2.5s infinite cubic-bezier(0.4, 0.14, 0.3, 1);
    }
};
@keyframes carbon-animation--icon-develop {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(10px);
  }
  20% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(0px);
  }
}
// Usage
.info-tile {
  @include carbon-animation--icon-develop();   
}

[lee-chase]

NOTE: this also works for pictograms built using the icon builders

[lee-chase]

@kristastarr thought you might be interested in this. I have only updated the React builder to test out the interest in progressing this with Carbon.

[kristastarr]

@johnbister Here's a link to the prototype:
https://pages.github.ibm.com/Krista-Starr/carbon-icons/#/
https://github.com/kristastarr/carbon-icons-demo

[sstrubberg]

Addressing this issue at carbon-design-system/icons-motion