Create and Refine Prototypes

Learning Objectives 

After completing this unit, you’ll be able to:

• Define keyframe.
• Identify methods for implementing Kinetics in the user interface (UI).
• Describe design tools for creating motion design prototypes.
• Explain key considerations in the prototype review process for motion design.

Prototype It

Now that Camila is ready to iterate on the animation for her design concept, she can work with a developer to create a prototype and revise it based on her conversations with the engineering team. A prototype is an experiment that’s purpose-built to answer a specific question in the design and build process. In this case, the question is how the team can use Salesforce scalable Kinetics patterns and custom animation within their new global navigation experience to create a functional and accessible experience that delights users. 

To learn more about the prototype process, check out the Design Strategy Prototyping module on Trailhead. 

To create the prototype, Camila can use a prototyping tool, like Codepen, which you learn more about later, to develop the code herself. Or, she can create specs from the mockup to show the developer what the transitions look like. She can also mark the styling hook values for duration and acceleration to provide a reference for the developer.

Cascading First, Please 

To begin the process, she reviews Salesforce Kinetics System implementation guidelines. Salesforce Kinetics Guidelines recommend Cascading Style Sheets (CSS) to style and layout web pages and motion design. Using a “CSS-first” approach lets you create most motion design by changing CSS property values and using an application programming interface (API)—a software intermediary that allows two applications to talk to each other—to enable motion.

Designers and developers choose between two CSS techniques to design component motion within a UI: transitions and keyframes.

Transitions

CSS code is used to create small-scale transitions between component elements, such as designing how elements, like text and color within a menu, animate when users interact with them. Use the transition technique for state changes where the entrance and exit transition mirror each other and for UI component state-to-state animation, like sliding and fading.

For example, Camila and the developer she partners with use CSS and JavaScript (JS) code to design the cascade effect within the double-panel component. This enables menu options to cascade vertically when users click a tab at the top of the homepage.

Cascade effect within the user interface.

Keyframes

Keyframes define the start and endpoints for motion. You create motion sequences using keyframes as anchor points and CSS code to program the actual animation. Use the keyframe technique for state changes where the entrance and exit transitions don't mirror each other, usually for more expressive, choreographed motion, like ripple patterns. 

For example, Camila marks the keyframe start and endpoints of the ripple motion that animates within button components in the navigation menu based on acceleration and speed values–Kinetics controls–and the developer designs it in CSS.

To learn more about Kinetics controls, check out the Salesforce Kinetics System module on Trailhead. 

Ripple motion within button components.

Ripple Motion Code

To create the code for the ripple motion, Camila and her team use a combination of HyperText Markup Language (HTML) and CSS code. 

HTML

This is the HTML markup for creating the button icon.

<button class="kx-button">
  <span class="label">Button icon</span>
  <span class="kx-ripple"></span>
</button>

CSS Ripple

To trigger the ripple effect when a user clicks the button, Camila and her team first create the ripple effect within a class called kx-ripple. Within the class, they then declare the color, scale, and position values for its default state before it is animated. 

CSS
.kx-ripple {
  display: block;
  position: absolute;
  background: rgba(21,137,238,.25);
  transform: scale(0);
  z-index: -1;
  opacity: 1;
}

The animate CSS class, when added to kx-ripple in this selector, provides the trigger for the animation. It contains the duration and the acceleration at which the complete animation takes place. Here, they can utilize the Kinetics styling hook value for ripple’s acceleration to keep it consistent with the Kinetics language. The Kinetics styling hook value for click ripple acceleration is cubic-bezier(0.35, 0.01, 0.62, 0.99). 

.kx-ripple.animate {
  animation: ripple 0.4s cubic-bezier(0.35, 0.01, 0.62, 0.99);
}

The @keyframe declares the animation itself. Using percentages ranging from 0% to 100%, they can control keyframe breakdowns for what the ripple will look like from the starting moment to the in-between and into the ending moment of the animation’s duration.

@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

The code sets above are partial examples and are not intended to produce animation within the UI. 

JavaScript

Salesforce Kinetics System guidelines advise using JS when you need to control motion playback programmatically, choreograph interactive states, or react to application events. Using JS, you can separate the concerns of the animation functionality from those of the styling. 

For example, use JS to trigger animation on a click, such as when a user clicks a button, and the ripple animation plays. JS triggers the ripple animation but also affords mouse coordinate awareness. This enables you to dynamically set the ripple effect’s origin point at the click time rather than strategically setting it in CSS.

Example of mouse coordinate awareness within the user interface.

Camila and her team use JS to trigger the desired ripple effect emanating from the position of the mouse at the time of the button click. Using a handler function that listens for the click event, they can trigger the click ripple animation by applying the animate class to the element with the kx-ripple class initially set in the HTML. Within the click event handling function, another event handling function is established to handle the event at the end of the animation, which essentially resets the button and removes the animate class. 

const kxButton = document.querySelector('.kx-button’);
const handleClick = (e) => {
	const kxRipple = kxButton.querySelector(‘.kx-ripple’);
	const handleRippleEnd = () => {
kxRipple.classList.remove('animate');
kxRipple.removeEventListener(‘animationEnd’, handleRippleEnd); 
}
	kxRipple.addEventListener(‘animationEnd’, handleRippleEnd);
kxRipple.style.left = (e.offsetX - kxButton.offsetWidth / 2) + 'px';
    	kxRipple.style.top = (e.offsetY - kxButton.offsetHeight / 2) + 'px';
    	kxRipple.classList.add('animate');
}
kxButton.addEventListener('click', handleClick);

Using classList.add and classList.remove, they can start and stop the animation by adding or removing the 'animate' class that contains the initial CSS ripple animation. Using offsetX, offsetY, offsetHeight, and offsetWidth, they can calculate the position of the cursor within the container and use it to dynamically reposition the start of the click ripple animation.

More Implementation Methods

More methods for implementing motion into your web experience include Web Animations API, GreenSock Animation Platform (GSAP), and Lottie. These methods may be limited or more rigid in their ability to integrate within a component. Yet, they may offer quicker means to a visual result when animation is the central focus.

Web Animations API 

The Web Animations API (WAAPI) enables synchronizing and timing changes to the presentation of a web page by combining timing and animation models. As a result, it includes benefits like allowing for timeline sequencing. Additionally, the implementation remains native to the browser without any additional library dependency to import. 

GreenSock Animation Platform

GSAP is a mature JS library that allows you to create animation in all major web browsers. Benefits include intuitive timeline sequencing and an available plugin library for more complex animation. Despite its popularity, GSAP is not integrated into the Salesforce platform. So, if you use it, keep in mind there is an external dependency of the library JS file to manage.

Lottie

Lottie is a library for app systems like iOS and Android that renders animations made with tools like Adobe After Effects in real time, allowing apps to use animations as easily as static images. Lottie is best for intricate motion pieces used sparingly in specific views and includes programmatic playback control using JS. It’s key to understand the limits of Lottie before taking this approach because not all after-effects animation works with Lottie.

To learn more about each method, check out Salesforce Kinetics System guidelines. 

Checking in with Camila and her developer teammate, they choose a hybrid path—a CSS-first approach with minimal JS to support ease-in acceleration for the navigation panel. They also use JS for the mouse position triggered events because this works with their production environment. 

Next, they explore tools they can use to build the motion design prototype. 

Prototyping Tools 

Finding an effective tool to visualize your motion design concept and share it with others for feedback is key to the motion design process. The tools included in this section are by no means exhaustive, but they are enough to get you started in choosing the best interactive prototyping tool for your project. 

*Use the plugins available in the Figma community to enable more advanced motion creation and export designs. See the link in Resources for more information. 

You can also use Figma, Flow, Haiku Animator, and Rive earlier in the motion design process to create your design mockup. And, using Adobe After Effects and Lottie, you can design and develop SVG animations and interactive prototypes using Lottie Player with projects in JSON, iOS, Android, web, and windows formats. To learn more about each of these tools, check out the relevant links in the Resources section. 

Feedback and Fine-tuning

Camilla shares the prototype with the engineering team for review and fine-tuning, including feedback on: 

• Salesforce Kinetics System guidelines for accessible experiences
• Keyboard accessibility best practices
• Kinetic styling hook values
• Choreography best practices

Salesforce Kinetics System Guidelines for Accessible Experiences 

Referenced during their initial collaboration kickoff, a key part of creating an accessible experience involves accommodating users' preferences to turn off animation, and offering that option systemwide. 

Keyboard Accessibility Best Practices 

The engineering team and Camila ensure the design follows Salesforce Kinetics System best practices for keyboard accessibility with interactive animation. This means ensuring users can tab through components and receive Kinetics feedback in addition to what they receive in the focus state, as well as making sure the team implements keyboard functionality within the motion choreography. For example, panel animation choreography sequences should follow similar logic in flow and be accessible by keyboard. 

Kinetic Styling Hook Values 

They also ensure that they mimic the values of the recommended Kinetics styling hook values and scale Salesforce Kinetics System animation for panel components into the custom panel component.

Choreography Best Practices 

And they reference key considerations for designing transitions between components and custom motion for the double panel component. This means ensuring the choreography's sequencing provides a logical and aesthetic flow. For example, a motion beginning in the first panel and ending in the second panel should feel smooth and continuous—the panel changes happening in the second panel should closely follow after the trigger animation ends within the first panel. 

With collaboration and best practices both in play, you set yourself and your team up for successful motion design using the Salesforce Kinetics System. 

Resources

• Blog: Kinetics in Motion 
  
• Trailhead: Design Strategy Prototyping
• Trailhead: Salesforce Kinetics System
• Salesforce Lightning Design System: Kinetics System Guidelines
• Trailhead: Lighting Design System Basics
• External Website: Figma
• External Website: Figma Community: Powerful plugins made just for Figma
• External Website: SVGator
• External Website: Flow
• External Website: Framer
• External Website: Animator by Haiku 
• External Website: Rive
• External Website: Codepen