I was working on some code to display a green circle with a tick (for success) and a red circle with a cross (for failure) within rows in ag-Grid to denote whether service calls succeeded or failed for each row of data. Having the graphics seemed good but what I really wanted was to animate the display of these graphics to make it obvious to the user that these graphics changes\/updated.<\/p>\n
animejs<\/a> looked to be a perfect solution to the problem.<\/p>\n There’s lots of great examples using animejs here<\/a>.<\/em><\/p>\n Obviously to begin with I’ve created a React application using the standard scaffolding, and then using yarn installed anime, i.e.<\/p>\n We’ll create a standard React component (SuccessFailureComponent.tsx) for displaying our new animated component.<\/p>\n In this code we’ve added the property success<\/em>, which when true will display the green circle with a tick and when false the red circle with the cross.<\/p>\n To begin with we’ll add the following code to draw our graphics to the render function<\/p>\n In the above we use the Scalable Vector Graphics<\/a> element to wrap drawing primitives to first draw a circle with the required fill colour and then using the symbol<\/em> const which is the drawing of a tick or cross.<\/p>\n If we run the React app at this point (assuming we’ve also added the following component to the App.tsx render method<\/p>\n then we’ll see the two SVG graphics displayed.<\/p>\n Animating our graphics<\/strong><\/p>\n We’ve come all this way in a post about animation and not animated anything, so let’s now do that. Back in the component, add <\/p>\n When the application is refreshed you’ll see the graphics scale from nothing to full sized.<\/p>\n In the first line we create the anime timeline which has parameters which will simply start the animation immediately. We then use the add<\/em> function with the target “status” (our SVG element) to scale the SVG from nothing to full sized with a duration of 600ms. Finally we specify the easing function to use.<\/p>\n We can also add more animation transitions to the timeline, for example the following additions to the timeline code (above) will result in the icons moving right by 10 pixels then returning to where they started<\/p>\n Or maybe we’d like to just spin the graphics using<\/p>\n There’s more than just the timeline function, there’s also stagger which allows the animation of multiple elements. Also keyframes which allows us to create an array of keyframes for our animations.<\/p>\n\r\nyarn add animejs\r\nyarn add @types\/animejs\r\n<\/pre>\n
\r\nimport React from 'react';\r\nimport anime from "animejs";\r\n\r\ninterface SuccessFailureProps {\r\n success: boolean;\r\n}\r\n\r\nexport class SuccessFailureComponent \r\n extends React.Component<SuccessFailureProps, {}> {\r\n render() {\r\n \/\/ to be implemented\r\n }\r\n}\r\n<\/pre>\n\r\nconst backColour = this.props.success ? \r\n "#0c3" : \r\n "red";\r\nconst symbol = this.props.success ? \r\n "M9 16l5 5 9-9": \r\n "M9 9l14 14 M23 9L9 23";\r\n\r\nreturn (\r\n <svg className="status" xmlns="http:\/\/www.w3.org\/2000\/svg"\r\n width="32"\r\n height="32"\r\n viewBox="0 0 42 42">\r\n <circle className="circle"\r\n cx="16"\r\n cy="16"\r\n r="16"\r\n fill={backColour}\/>\r\n <path d={symbol}\r\n fill="none"\r\n stroke="white"\r\n stroke-width="2.5" \r\n stroke-linecap="round"\/> :\r\n <\/svg>\r\n);\r\n<\/pre>\n\r\n<SuccessFailureComponent success={false}\/>\r\n<SuccessFailureComponent success={true}\/>\r\n<\/pre>\n\r\ncomponentDidMount() {\r\n var timeline = anime.timeline({ \r\n autoplay: true\r\n });\r\n\r\n timeline\r\n .add({\r\n targets: '.status',\r\n scale: [{ \r\n value: [0, 1], \r\n duration: 600, \r\n easing: 'easeOutQuad' }\r\n ]\r\n });\r\n}\r\n<\/pre>\n\r\n.add({\r\n targets: '.status', \r\n translateX: 10\r\n})\r\n.add({\r\n targets: '.status',\r\n translateX: 0\r\n});\r\n<\/pre>\n\r\n.add({\r\n targets: '.status', \r\n rotate: 360\r\n});\r\n<\/pre>\n