Adding Animations

To implement animations in-game, use scripts. For this tutorial, you'll implement the previously made victory animation using a pre-made script. Once finished, this animation can be used to celebrate a player's accomplishment, like reaching the end of an obby or finding a secret.

Scripting Animations

Animations are triggered using scripts. One approach is to use events to play animations in a variety of situations, like a player finishing a level, defeating an enemy, or even making an in-game purchase.

Set up the Project

For this project, you'll create parts that when touched, trigger an animation for that player.

  1. To organize all parts that will play the animation, add a folder in Workspace (hover over Workspace and click +) named TouchPartFolder.

  2. In TouchPartFolder, add a part.

    Make sure the part is placed where playing the animation would make sense, such as the end of a level or near an object players collect.

    Example Victory Part
    Example Interaction Part

  3. In StarterPlayer > StarterCharacterScripts, create a LocalScript named TouchPartRegister. Then copy and paste the code below.

    -- Used with "PlayerAnimationFeedback" script to play animations on part touches

    

    -- Services

    local ReplicatedStorage = game:GetService("ReplicatedStorage")

    local Players = game:GetService("Players")

    

    local player = Players.LocalPlayer

    local character = player.Character or player.CharacterAdded:Wait()

    local humanoid = character:WaitForChild("Humanoid")

    local canTouch = false

    

    -- Include feedback animation module

    local PlayerAnimationFeedback = require(ReplicatedStorage:WaitForChild("PlayerAnimationFeedback"))

    

    -- Function called when a part is touched

    local function onPartTouch(otherPart)

    	if humanoid and canTouch == false then

    		canTouch = true

    		PlayerAnimationFeedback:PlayAnimation()

    		canTouch = false

    	end

    end

    

    -- On startup, call animation module load function

    PlayerAnimationFeedback:LoadAnimation(humanoid)

    -- Also bind a folder of parts to the "Touched" event to run "onPartTouch()"

    local touchPartFolder = workspace:WaitForChild("TouchPartFolder")

    local touchParts = touchPartFolder:GetChildren()

    

    for _, touchPart in touchParts do

    	touchPart.Touched:Connect(onPartTouch)

    end

    This script finds all parts in the TouchPartFolder and gives them Touched() events. When fired, the event runs a function that plays an animation for a player.

  4. The next script triggers animations for a player. In ReplicatedStorage, create a new ModuleScript named PlayerAnimationFeedback. Then, copy and paste the code below.

    -- Used with "TouchPartRegister" script to play animations for a player

    local PlayerAnimationFeedback = {}

    

    local feedbackAnimationTrack

    local ANIMATION_FADE = 0.3

    local ANIMATION_ID = "rbxassetid://YOUR_ANIMATION"

    

    -- Function to load animation onto player's character

    function PlayerAnimationFeedback:LoadAnimation(humanoid)

    	local feedbackAnimation = Instance.new("Animation")

    	feedbackAnimation.AnimationId = ANIMATION_ID

    	feedbackAnimationTrack = humanoid.Animator:LoadAnimation(feedbackAnimation)

    	feedbackAnimationTrack.Priority = Enum.AnimationPriority.Action

    	feedbackAnimationTrack.Looped = false

    end

    

    -- Function to play the animation

    function PlayerAnimationFeedback:PlayAnimation()

    	feedbackAnimationTrack:Play(ANIMATION_FADE)

    	task.wait(feedbackAnimationTrack.Length)

    end

    

    return PlayerAnimationFeedback

Playing Animations

Animations must be identified in a script, loaded, and played.

Setting the Animation

The script needs to know which animation to play. To use an exported animation, find its asset ID through a web browser. That ID will then allow that animation to be loaded in the script.

  1. Open the Animations section of the Create page.

  2. Locate and click an exported animation.

  3. Copy its ID from the URL in your browser.

  4. In the script, PlayerAnimationFeedback, replace the placeholder, YOUR_ANIMATION (Line 8), with the ID you copied.

  5. Run the project and test that once a player hits the part, you see the animation.

Next Steps

Below are a few ways to continue learning

Learn About Animation

So far, you've learned how to create animations and add them into experiences. To continue learning, we recommend visiting the Animation overview.

On that page, you'll find useful links to improving animations, such as using the curve editor for smooth movement, or tips in refining animations.

Animate Parts

Additionally, start the optional lesson Animating Parts to learn how to code tweens, a feature that lets you scale, rotate, and move parts. A sample of the final project is below.

Previous