Hover over any icon to trigger its animation. Click to copy the SVG markup.
Usage in JSX / HTML: Inline the SVG and toggle data-animating on the wrapper div to trigger the animation. CSS animations are defined in assets/icons/carbon-motion/motion-icons.css. SVG data is in assets/icons/carbon-motion/motion-icons.js.
/* trigger animation */
wrapperEl.setAttribute('data-animating', '');
setTimeout(() => wrapperEl.removeAttribute('data-animating'), 2000);
Copied SVG