Constructing Customized Animations within the Workflow Builder

Slack customers have extra energy than ever to automate routine duties and processes, saving themselves time every day. Workflow Builder, a process automation instrument constructed into Slack, has continued to enhance since its launch again in 2019. Together with varied new steps and triggers, we constructed a brand new sidebar part for all obtainable workflow steps. These steps at the moment are accessible to customers with out having to open a modal.

The enhancement of the Slack Platform, coupled with good and important design adjustments, makes Workflow Builder a brand new and highly effective expertise for customers automating duties in Slack.

Highly effective instruments will be intimidating, although. On the Workflow Builder crew, we recognized animations as an excellent alternative to create pleasant and approachable UI magic.  Easy actions, like shifting or including steps, ought to have a Slack contact — the sleek and enjoyable interplay patterns that Slack is thought for.

The Workflow Builder expertise already had drag-and-drop animations when shifting steps inside a workflow. However, with the newly launched sidebar, a drag-and-drop inconsistency was uncovered. Why can’t customers drag and drop a step from the sidebar into the workflow?

Working with an animation library

Sadly, drag-and-drop animations from our new steps sidebar right into a workflow weren’t easy to assist.

Workflow Builder makes use of react-beautiful-dnd — a library that helps drag-and-drop interactions with pure animations. Regardless that this library is highly effective, it is usually opinionated and has limitations.

The react-beautiful-dnd library works by wrapping parts in a React context. It helps drag-and-drop animations by encasing an inventory of draggable parts in a droppable space. That’s enjoyable to say, proper?

This labored effectively for dragging and dropping steps inside a workflow — we had a singular record of steps and these steps may very well be moved throughout the droppable context.

However we would have liked to rethink that technique to assist drag-and-drop animations for the steps sidebar. As an alternative of wrapping a portion of the builder, we would have liked to wrap the complete builder web page with the drag-and-drop context, and have two separate lists of draggables and droppables. This might enable for steps to be moved from one record to the opposite.

Animation worth is within the particulars

Constructing on the present drag-and-drop assist inside Workflow Builder, we had been in a position to get drag-and-drop between the steps sidebar and the workflow steps record working. Nevertheless, “it really works” has by no means been our high quality bar for manufacturing experiences.  We realized animations also needs to create a nice and inspiring expertise. With that in thoughts, earlier than a public launch of the options, we went to the following part of prototyping — polish.

We discovered the worth of animations as we discovered options to difficult points:

• Utilizing context suppliers and responders
  • Becoming drag-and-drop assist simply in our codebase

• Working with legacy Workflow Builder parts
  • Leveraging legacy parts for the brand new Workflow Builder

• Creating customized animations
  • Animating the drop of a step right into a workflow

• Making dynamic placeholders
  • Including a placeholder when dragging a step over a droppable space

• Fixing trace field spacing issues
  • Making certain the animations labored easily with present trace bins

• Experimenting with a tilt animation
  • Creating enjoyable tilt animations as you drag a step

Utilizing context suppliers and responders

The react-beautiful-dnd library works through the use of responders. These are “top-level utility occasions that you should use to carry out your personal state updates, fashion updates, in addition to to make display screen reader bulletins.” The library required us to keep up the state of drag-and-drop info and to have a centralized place for state-specific actions.

Our customized context supplier wrapper was an excellent resolution for this. We saved details about the step being dragged, the vacation spot info, and the placement of the place the step was being dragged over. Actions — akin to what occurs whenever you drop or add a step — had been additionally maintained right here. This info was up to date dynamically by the supplied react-beautiful-dnd responders and maintained in an remoted Workflow Builder drag-and-drop part wrapper.

<WorkflowDragDropContext.Supplier worth=workflowContexts>
			   <DragDropContext
				   onBeforeCapture=onBeforeCapture
				   onBeforeDragStart=onBeforeDragStart
				   onDragUpdate=onDragUpdate
				   onDragEnd=onDragEnd
			   >
				   youngsters
			   </DragDropContext>
 </WorkflowDragDropContext.Supplier>

Working with legacy Workflow Builder parts

The brand new Workflow Builder frontend is supported by the legacy Workflow Builder parts. This was an engineering determination made after we first began constructing out the brand new expertise. By reusing present parts, we had been in a position to develop rapidly, and get issues like validation, the step interface, and the set off interface out of the field. Nevertheless, supporting legacy workflows whereas including options to new workflows was a problem.

We solved this by dynamically shifting the drag-and-drop context. By checking the kind of workflow, and if the function was turned on or not, we may enable each the previous and new drag-and-drop assist to coexist. Having a thought-out plan for utilizing our highly effective Workflow Builder parts, and testing completely, was key to the event of latest options.

Creating customized animations

Workflow Builder steps within the sidebar are a unique dimension than the steps within the record. This prompted a really awkward default drag-and-drop animation.

We created helper capabilities that changed the unique react-beautiful-dnd styling. We used the vacation spot width to translate the place of the dragged step to the center of the workflow step record.

const translate = `translate($moveTo.x + destinationWidth - stepItemWidthHalfpx, $moveTo.ypx)`

The vacation spot width was calculated by the library responders — utilizing onBeforeDragStart particularly. We queried the DOM earlier than dragging occurred and positioned the droppable vacation spot container to search out the width. Our customized drag-and-drop context wrapper labored completely to carry this info and was used to replace the fashion.

Making dynamic placeholders

After a number of iterations, we observed it was very obscure the place a step may very well be dropped. This posed an enormous problem since react-beautiful-dnd didn’t assist including placeholders.  We would have liked to be artistic to realize the dragging impact we needed. Drawing some inspiration, we created a customized section to dynamically render a placeholder primarily based on the place the consumer was dragging a step.

As drag was being up to date, we positioned the vacation spot DOM factor, the dragged DOM factor, and the width and peak of the placeholder. To search out the x-coordinate and y-coordinate, we used the vacation spot index and calculated the place within the DOM. This placeholder dimension was handed into the drag-and-drop context supplier within the workflow step record.

{

Fixing trace field spacing issues

Workflow Builder has many shifting elements and a kind of is trace bins. When a consumer clicks in between steps, a touch field seems and prompts the consumer so as to add a step. That is useful but it surely was inflicting points with drag-and-drop. Exhibiting the placeholder whereas dragging prompted spacing points as a result of it’s technically not a step. Moreover, it didn’t make sense to see the placeholder whereas the consumer was making an attempt to maneuver the step to a unique place.

The clear resolution was to take away the trace field whereas dragging. This required an in-depth data of the distinction between state updates with onBeforeDragStart vs onBeforeCapture responders. We initially tried to reset the placeholders with the onBeforeDragStart responder.

  const OnBeforeDragStart = useCallback(
       () => 
           // Earlier than dragging begins reset the 
           // trace field to keep away from awkward spacing
           setHideHintBox(true);
       ,
       [dispatch]
   );

We rapidly realized this could not work. The state was not up to date in time. React-beautiful-dnd DOM detected the placeholder’s existence regardless that it was not there, inflicting noticeable spacing issues.

We changed the onBeforeDragStart responder with onBeforeCapture. The distinction between these responders is that onBeforeCapture helps modifying the DOM earlier than any calculation happens. Hiding and resetting the trace field earlier than the dragging motion allowed us to create a greater consumer expertise and remedy our drawback.

Experimenting with a tilt animation

Animations can at all times be enhanced. Including a tilt was a design determination that was initially a prototype. Our designer, Kyle Tezak, had a enjoyable thought so as to add a tilt to the step when dragging. Working carefully with an engineer and the Design Expertise crew, we created a proof-of-concept prototype. This was demoed to the crew and everybody liked the concept — why not make a repetitive motion thrilling? We knew we needed to share this with our clients.

We created a Pure Drag part that took a method object and modified the rotation primarily based on how briskly the consumer was dragging. We added this animation through the use of the requestAnimationFrame window methodology and created a easy tilt impact that lasted so long as the consumer was dragging the step.

const newStyle =
		   snapshot.isDragging && !snapshot.dropAnimation
			   ? 
					   ...fashion,
					   remodel: modifiedAnimation.remodel,
				 
			   : fashion;

What animation taught our crew

Animation within the Workflow Builder turned our alternative to highlight highly effective, new options. Over numerous iterations, we fine-tuned the drag-and-drop UI to be a nice and productive expertise for energy customers and new customers. We discovered plenty of engineering classes alongside the way in which — particularly round discovering artistic methods to work inside a sophisticated codebase. These challenges paved the way in which for brand new design and engineering animation capabilities within the builder.

At Slack, craft is central to each facet of our design and engineering life cycle. It’s the small issues, like making including steps really feel enjoyable and easy, that provide the confidence to discover new options and need to use them once more. Dedication to craft and investing in small, pleasant interactions all add as much as make work less complicated, extra nice, and extra productive for our customers.

We’re hiring; come work with us! Apply now