TechPrufer
Get started
Slack
Slack logoSlack · Feature trail

Workflow Builder Custom Animations

1 post · Dec 2023

What this trail covers

This thread tracks the evolution of Slack's Workflow Builder, focusing on enhancing user experience through custom animations and improved drag-and-drop functionality. Initial posts detailed the introduction of a new sidebar for workflow steps and the challenges in integrating drag-and-drop from this sidebar into the workflow canvas. This post details the technical implementation of custom animations, including solving issues with the react-beautiful-dnd library, creating dynamic placeholders, resolving hint box spacing problems, and adding a tilt animation to dragged steps, ultimately creating a more friendly and approachable UI.

All Slack trails
  1. Building Custom Animations in the Workflow BuilderThis post details the technical implementation of custom drag-and-drop animations for Slack's Workflow Builder. It addresses challenges with the react-beautiful-dnd library by re-architecting the drag-and-drop context to wrap the entire builder page and support two separate lists. Key technical contributions include: creating custom helper functions to translate dragged steps between lists with different sizes, implementing dynamic placeholders by rendering custom segments based on drag position, solving hint box spacing issues by using `onBeforeCapture` to hide hint boxes before dragging, and adding a tilt animation using `requestAnimationFrame` for a more engaging user experience.