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 numerous new steps and triggers, we constructed a brand new sidebar part for all out there workflow steps. These steps are actually 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 may be intimidating, although. On the Workflow Builder group, we recognized animations as an incredible alternative to create pleasant and approachable UI magic.  Easy actions, like transferring or including steps, ought to have a Slack contact — the sleek and enjoyable interplay patterns that Slack is understood for.

The Workflow Builder expertise already had drag-and-drop animations when transferring 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 help.

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

The react-beautiful-dnd library works by wrapping elements in a React context. It helps drag-and-drop animations by encasing an inventory of draggable elements 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 checklist of steps and these steps could possibly be moved inside the droppable context.

However we would have liked to rethink that technique to help drag-and-drop animations for the steps sidebar. As a substitute of wrapping a portion of the builder, we would have liked to wrap the whole builder web page with the drag-and-drop context, and have two separate lists of draggables and droppables. This could enable for steps to be moved from one checklist to the opposite.

Animation worth is within the particulars

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

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

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

• Working with legacy Workflow Builder elements
  • Leveraging legacy elements 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
  • Guaranteeing the animations labored easily with current 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 by utilizing responders. These are “top-level software occasions that you need to use to carry out your personal state updates, model updates, in addition to to make display reader bulletins.” The library required us to keep up the state of drag-and-drop data and to have a centralized place for state-specific actions.

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

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

Working with legacy Workflow Builder elements

The brand new Workflow Builder frontend is supported by the legacy Workflow Builder elements. This was an engineering choice made once we first began constructing out the brand new expertise. By reusing current elements, we had been capable of develop rapidly, and get issues like validation, the step interface, and the set off interface out of the field. Nonetheless, supporting legacy workflows whereas including options to new workflows was a problem.

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

Creating customized animations

Workflow Builder steps within the sidebar are a special dimension than the steps within the checklist. This brought about a really awkward default drag-and-drop animation.

We created helper features 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 checklist.

const translate = `translate(${moveTo.x + destinationWidth - stepItemWidthHalf}px, ${moveTo.y}px)`

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

Making dynamic placeholders

After a couple of iterations, we seen it was very obscure the place a step could possibly be dropped. This posed an enormous problem since react-beautiful-dnd didn’t help including placeholders.  We wanted to be artistic to realize the dragging impact we wished. 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 ingredient, the dragged DOM ingredient, 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 checklist.

{{      (isDraggingOver || (isDraggingOverLastDroppable &&
	   !isSourceWorkflowList)) && (
			  <div
				  model={{
				  prime:
				  placeholderElementSizing.clientY +
				  HALF_DIVIDER_HEIGHT,
				  left: placeholderElementSizing.clientX,
				  peak: placeholderElementSizing.clientHeight,
				  width: placeholderElementSizing.clientWidth,
				  }}
				  />
					  )}

Fixing trace field spacing issues

Workflow Builder has many transferring elements and a type 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. Displaying the placeholder whereas dragging brought about 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 attempting to maneuver the step to a special place.

The clear answer 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 might not work. The state was not up to date in time. React-beautiful-dnd DOM detected the placeholder’s existence although 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 resolve our downside.

Experimenting with a tilt animation

Animations can all the time be enhanced. Including a tilt was a design choice 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 intently with an engineer and the Design Expertise group, we created a proof-of-concept prototype. This was demoed to the group and everybody beloved the thought — why not make a repetitive motion thrilling? We knew we needed to share this with our prospects.

We created a Pure Drag element that took a method object and modified the rotation primarily based on how briskly the consumer was dragging. We added this animation by utilizing the requestAnimationFrame window technique and created a clean tilt impact that lasted so long as the consumer was dragging the step.

const newStyle =
		   snapshot.isDragging && !snapshot.dropAnimation
			   ? {
					   ...model,
					   rework: modifiedAnimation.rework,
				 }
			   : model;

What animation taught our group

Animation within the Workflow Builder grew to become 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 realized loads of engineering classes alongside the best way — particularly round discovering artistic methods to work inside an advanced codebase. These challenges paved the best way 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 clean, that provide the confidence to discover new options and wish to use them once more. Dedication to craft and investing in small, pleasant interactions all add as much as make work easier, extra nice, and extra productive for our customers.

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