-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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
Comments
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();
} |
NOTE: this also works for pictograms built using the icon builders |
@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. |
@johnbister Here's a link to the prototype: |
Addressing this issue at carbon-design-system/icons-motion |
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.
The text was updated successfully, but these errors were encountered: