Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create add-on package for animated icons #7346

Closed
kristastarr opened this issue Nov 25, 2020 · 5 comments
Closed

Create add-on package for animated icons #7346

kristastarr opened this issue Nov 25, 2020 · 5 comments
Assignees
Labels
proposal: open This request has gone through triaging. We're determining whether we take this on or not. type: enhancement 💡

Comments

@kristastarr
Copy link

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
Copy link
Member

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
Copy link
Member

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

@lee-chase
Copy link
Member

@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
Copy link
Author

@tay1orjones tay1orjones removed the proposal: open This request has gone through triaging. We're determining whether we take this on or not. label Nov 8, 2021
@tay1orjones tay1orjones moved this to Needs more research in Roadmap Aug 24, 2022
@sstrubberg sstrubberg added proposal: open This request has gone through triaging. We're determining whether we take this on or not. and removed proposal: needs more research 🕵️‍♀️ labels Oct 13, 2022
@sstrubberg
Copy link
Member

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

Repository owner moved this from Icebox to Not pursuing in Roadmap Oct 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
proposal: open This request has gone through triaging. We're determining whether we take this on or not. type: enhancement 💡
Projects
Archived in project
Archived in project
Development

No branches or pull requests

6 participants