07. Rive Team Workshop

05. Rive Transformation Exercises

Introduction

For this class you will work in small groups to explore the idea of transformation through animation and interaction in Rive. You will rotate through three short exercises. Each exercise focuses on a different aspect of transformation, in this case a literal sense.
Two of these will focus on animation.
One will introduce interaction using a state machine.

The goal is not to make something polished, but to understand how change happens over time, and how that change can be controlled.

Structure of the Session

  • You will be split into three/four groups

  • Each group will start at the same "station"

  • You will spend about 15 to 20 minutes at each station

  • After each round, we will:

    • briefly review your progress.
    • discuss any technical issues or discoveries.
    • introduce the next station

Station 01. A to B Transformation

Goal

Understand how to animate a clear transformation from one state to another.

Instructions

  • Create a simple drawing you all agree on, made up of geometric shapes.

  • Animate at least two properties:

    • position
    • scale
    • rotation
    • color

Requirements

  • The object must clearly transition from one state to another
  • The transformation should feel intentional and readable, even if it is subtle

Station 02. Breaking the Transformation

Goal

Make transformation feel expressive.

Instructions

  • Start with a simple transformation like Station 01

  • Add a second phase or disruption (we will discuss the below briefly if you are not familiar)

    • overshoot
    • wobble
    • squash or stretch
    • delay or pause
    • distortion

  • The animation should begin to align with the intention of your drawing. That is to say, if it is an organic form, should it move more "goopily"? Should it take longer to settle? Would the hair settle after the face if it is a face?

Requirements

  • Add necessary keyframes in order to achieve the effect you want. This may also involve animating new parts of your drawn form separately

Station 03. Click to Change

Goal

Create a simple interactive transformation using a state machine.

Instructions

  • From the previous two stations, determine two states (i.e. a face that is happy and then sad, a hand that is closed and then open)

  • Decide how you want them to transition (one way)

    • clicking
    • hovering

  • In the State Machine:

    • Create a boolean input called isOn
    • Create two states (A and B)
    • Create transitions:
      • A to B when isOn = true
      • B to A when isOn = false

  • Add a clickable area that toggles the boolean

Requirements

  • One action should trigger a visible transformation
  • The system should be able to go back and forth between states

Notes on Transformation

In all three exercises, think about transformation as a rule:

  • something starts in one state
  • something happens
  • something changes

This could be:

  • smooth or abrupt
  • controlled or unstable
  • reversible or one way

Focus on what changes, how it changes, and what causes it.

Limitations

  • Keep your shapes simple!
  • Do not worry about polish
  • Focus on clarity over complexity
  • It is okay if things feel rough or incomplete