Introduction

The RoUI3 animation module provides users the ability to manipulate the animations they export directly from the RoUI3 plugin. It has an extensive feature list and is easy to use. This page will run you through the steps needed to start using the module and playing your animations.

Quick Start

Starting with the module is very simple but there are some advanced concepts you can learn to really push the limits of your UI animations. Let's learn the easiest way to play an animation.

1. Downloading the module

The RoUI3 plugin comes with a download button directly within the plugin itself that fetches the latest version of the module from GitHub. This will place it into the directory you have selected in the Roblox Explorer.

2. Creating an animation

local RoUI3 = require(script.RoUI3) -- This is the RoUI3 animation module
local myAnimationModule = script.myAnimation -- This is the ModuleScript exported by the RoUI3 plugin

local myAnimation = RoUI3.new(myAnimationModule) -- Create a new animation

3. Setting a target

RoUI3 has no way to know where you want to actually use this animation. This is why we need to directly set a target.

myAnimation:SetTarget(script.Parent) -- Assuming the parent is the ScreenGui we animated in RoUI3

4. Playing the animation

With the target set we are ready to play the animation!

myAnimation:Play()

As you can see it's very easy to play RoUI3 animations but there is so much more that can be done.

Animation Methods

Yielding

myAnimation:Wait()

Example:

myAnimation:Play()
myAnimation:Wait()
print("Finished playing!") -- Doesn't run until the animation finishes

Pausing

myAnimation:Pause()

Example:

myAnimation:Play()
task.wait(0.5)
myAnimation:Pause() -- Pause playback
task.wait(2)
myAnimation:Resume() -- Resume playback

Canceling

myAnimation:Cancel()

Example:

myAnimation:Play()
task.wait(0.5)
myAnimation:Cancel()

Template Animations

RoUI3 offers two distinct types of animations:

1. Hierarchy
2. Template

Hierarchy animations are the most common. These are when you have a complicated hierarchy of instances in some ScreenGui and you want to precisely animate these instances based on their instance tree structure. For most use cases this is what you'll be using.

RoUI3 also offers template animations. These animations do not use a hierarchy and instead act as a template for the animated properties. When you mark an animation as a template in RoUI3 and export every instance's animations are exported separately. Instead of the values of your keyframes being absolute during playback they become offsets. This is useful for things like a hover animation where a button grows or a fade out animation that you want to be reusable. You can also set multiple targets for these animations using :AddTarget() instead of :SetTarget().