Rive + Gatsby = Rise of the Robots

An idea was born 🤖

When Paul Scanlon reached out with a proposal for a shared demo, he brought a vision that excited everyone here at Rive: create an inspirational, accessible site with a nod to the creativity of the Flash days. Paul shared his goals in an Art Direction document with examples and concepts pulled from various sources.

Paul, with his design and development skills, teamed up with Rive animators, JC and Robert, to create something visually exciting and interactive. You can play with the live demo here!

This was an opportunity to explore the designer-to-developer handoff with a new collaborator! Paul was awesome to work with! In addition to his art direction, he gave clear requests for the animations and their purpose (e.g.,, hero bot, newsletter signup bot, Rive info bot, Gatsby info bot, and a blog bot). He noted that the animations needed two modes, 1 for regular viewers and 1 for viewers that prefer limited motion. But, he also gave the animators creative license for the final design and vision of the interactions!

We are so excited that we have two events to share how we worked together to make this site! Join us live in San Francisco on June 1 or through our webinar on June 14th! We look forward to seeing you in person or online!

Creating a successful designer-to-developer handoff

Standard handoff

The designer-to-developer handoff usually requires significant documentation and review. A typical design relationship that includes interactive animations might go something like this:

• Design in one tool

• Animate in another

• Redline or create motion docs to help developers recreate everything in code or…

• …export from a motion design tool with limited interactivity

• Developers follow specs to implement the designer’s vision

• Designers cannot easily make changes or iterate past this point without starting most of this cycle over again.

Iterating through this process, with total documentation and implementation of interactions takes hours of precious creator time.

The Rive handoff

When working with Rive, the handoff doesn’t require any documentation. The Rive file itself is the documentation.

• Design and animate directly in the Rive editor

• Add interactivity with Rive’s State Machine, which provides Inputs that can be controlled by developers

• Developers add the Rive runtime to their project, allowing them to load and manipulate the same file created by the designers

• Designers are free to continue to make changes and iterate on the design, animation, and interactivity of the file without needing developer hours

Details of our process

• Setting this collaboration up for success started with creating a shared workspace using the Rive Studio plan. Once set up, Paul, JC, and Robert could collaborate on the same Rive files throughout the design, animation, and interaction creation process.

• Robert and JC sketched out the vision for the animations and user interactions.

• They created a file in Rive with their color palette and notes about their designs.

• JC and Robert then created each robot in its own file. They created the animations and used the State Machine to make them interactive.

• They let Paul know the files were ready. He was then able to pull the files from the shared workspace and see the names of the Inputs and State Machines to use them with the Rive Web Runtime.

• JC, Robert, Paul, and our DevRel, Zach, coordinated to make sure all Iinputs used the same naming conventions.

Iterations were fast and easy because the files remained the same with small color or background adjustments. Paul didn’t have to change his code; just drop in the updated Rive files.

Notes on limiting motion for accessibility:

Making these Rive files accessible to users with vestibular disorders was important and a goal Paul had set for the project. A key component was to ensure each of the Rive files supported an experience for users who may have enabled a reduced motion setting on their devices. The State Machine made this simple to accomplish. JC and Robert duplicated their original animations and adjusted the keys to reduce the strength and  frequency of motion. They added a boolean input “isLimited” to determine whether the full animation or the limited animation should play. Voila, Paul now had a way to hook up the Prefers Reduced Motion setting by enabling the “isLimited” input.

Have more questions about how to set up your collaborations and make your animations interactive? Join us for our Gatsby and Rive meet-up and webinar.

Rise of the Robots - In-person Event Jamstack Creativity, Performance Optimization and Accessibility

June 1 | 18:00 - 20:00 PDT Andreessen Horowitz, 180 Townsend St, San Francisco, CA 94107

Register Now

Rise of the Robots - Virtual Webinar Jamstack Creativity, Performance Optimization, and Accessibility

June 14 | 8:00 - 9:00 PDT

Register for the webinar here!