Events & Interactivity

💡

Events enable you to change an object state based on your input to the Viewport; this is similar to how CSS or JS events work (if you are familiar with these terms).

Before creating a new event, make sure that you already have at least two states created for your object (with different values).

How to add your first event

  1. Select the object you want to add a new event to.
  2. Go to the Events panel on the right sidebar and click the "+" icon.
  3. Use the Type dropdown to switch to a different event (Mouse Down, Up, Key, etc.).
  4. From the Object dropdown, choose the target object for the event.
  5. On the State dropdown, choose the target state to which the event is going to transition.

Now you can play around with the rest of the settings and preview your animation by entering the Presentation Mode.

image

Here is a live example of the above.

Click & Drag 👆 A "Start" Event cycling and repeating with a "Ease In Out" transition, from one state to another.

image

Here is a description of the event's properties:

  • Type - The way the event gets triggered.
  • Object - The object that gets affected by the event.
  • State - The target state to transition.
  • Cycle - If the event should return to its original starting point.
  • Rewind (Shown if Cycle is active) - If active, the transition back to the initial state is mirrored instead of reversed.
  • Repeat - If the animation should keep repeating indefinitely.
  • Transition - Different ways to transition between states.
  • Duration - The duration of the change between states.
  • Delay - Delays the event by the defined seconds.

👉 Next Steps