{"id":16396,"date":"2023-12-05T18:52:41","date_gmt":"2023-12-05T18:52:41","guid":{"rendered":"https:\/\/slack.engineering\/?p=16396"},"modified":"2023-12-05T18:52:41","modified_gmt":"2023-12-05T18:52:41","slug":"building-custom-animations-in-the-workflow-builder","status":"publish","type":"post","link":"https:\/\/slack.engineering\/building-custom-animations-in-the-workflow-builder\/","title":{"rendered":"Building Custom Animations in the Workflow Builder"},"content":{"rendered":"

Slack users have more power than ever to automate routine tasks and processes, saving themselves time each day. Workflow Builder, a task automation tool built into Slack, has continued to improve since its launch back in 2019. Along with various new steps and triggers, we built a new sidebar section for all available workflow steps. These steps are now accessible to users without having to open a modal.<\/p>\n

\"\"
Before<\/figcaption><\/figure>\n
\"\"
After<\/figcaption><\/figure>\n

The enhancement of the Slack Platform, coupled with smart and significant design changes, makes Workflow Builder a new and powerful experience for users automating tasks in Slack.<\/p>\n

Powerful tools can be intimidating, though. On the Workflow Builder team, we identified animations as a great opportunity to create friendly and approachable UI magic.\u00a0 Simple actions, like moving or adding steps, should have a Slack touch \u2014 the smooth and fun interaction patterns that Slack is known for.<\/p>\n

\"\"<\/p>\n

The Workflow Builder experience already had drag-and-drop animations when moving steps within a workflow. But, with the newly introduced sidebar, a drag-and-drop inconsistency was exposed. Why can\u2019t users drag and drop a step from the sidebar into the workflow?<\/b><\/p>\n

Working with an animation library<\/b><\/h2>\n

Unfortunately, drag-and-drop animations from our new steps sidebar into a workflow were not simple to support.<\/p>\n

Workflow Builder uses react-beautiful-dnd<\/a> \u2014 a library that supports drag-and-drop interactions with natural animations. Even though this library is powerful, it is also opinionated and has limitations.<\/p>\n

<\/p>\n

\"\"<\/p>\n

The react-beautiful-dnd library works by wrapping components in a React context. It supports drag-and-drop animations by encasing a list of draggable components in a droppable area. That\u2019s fun to say, right?<\/p>\n

 <\/p>\n