Players can get feedback to whether or not their actions are doing anything with animations. This can be a tree shaking when hit, or pet cheerfully bouncing when fed. In this case, we’ll show you how to make a button that moves when the player clicks it.
Is This Tutorial For Me? »
Tweening with Animations
One way of animating objects is using tweens. A tween, short for in-between, is a word for the process of changing a starting value to an ending value over a certain amount of time. Tweens can be used to change properties such as position, color, or rotation.
For this project, a tween will move an object from a starting position to a goal position.
- Determine what part you’ll be animating. This project will animate a button that’ll sink into a wall.
- 1: Button
- 2: Wall
- In the part that will move, add a ClickDetector and a script named TweenMove. Do not rename the ClickDetector.
Using Models »
If you’re using a model with many parts, pick one part to move (such as the button in this example), and put the
MoveTween script as it’s child.
- Open the TweenMove script. Then, copy and paste the script below.
- Playtest and click the object. While testing, you may notice the object moves the wrong direction or distance. That can be customized in the next section.
Adjusting the Move Tween
With the script added, you can customize it to suit the needs of your game. The button can be tweened to move in directions like forward and back, or up and down.
Remember, tweens transition from a starting value to a goal value. This script uses CFrame to move the button in a direction relative to its current position. That direction is controlled in Line 28 of the script.
On that line, a new CFrame is created using X, Y, and Z coordinates. In this example, the button moves relative to its Y axis.
To have the button move in a different direction, simple replace one of the desired coordinates with the line:
TWEEN_MOVE_DISTANCE * buttonState. Set all other coordinates to
For example, this line will move it relative to its X axis instead.
Tween Time and Distance
The script includes the following variables that affect the tween’s movement. Capitalized names like
TWEEN_TIME are written specifically for this script to be modified.
Try changing the value of one variable below:
- Line 11 -
TWEEN_TIME: The time in seconds it takes for a tween to happen.
- Line 12 -
TWEEN_MOVE_DISTANCE: The distance the button moves in studs.
Script Notes and Limitations »
- The script moves parts a set distance. If you want to tween parts to a specific point, check out further documentation on TweenService.
- If your object is complex (such as being built of many parts), either turn it into a Union or use a equivalent meshpart.
Tweening Other Properties
Most properties with a numerical data type can be tweened. This section includes some common properties, like rotation, that can be used to bring more player feedback into your game. Keep in mind, you can also tween multiple properties at once.
For a full list of properties, see the TweenService API page.
For rotation, combine tweening and Cframes instead of just using Vector3. Rotation tweens can be used to make creatures wiggle when pet, or coins twirl as they’re picked up.
In the next script example, the creature’s position and rotation are both tweened when clicked to show how happy it is when being pet.
Changing the size of in-game objects can also show that a player interacted with them. For instance, pickups like health packs or gemstones can shrink when touched. To scale parts, change the tween goal to a new Vector3 of the desired size.
Parts can transition colors by tweening with Color3 values. For instance, enemies or destructible objects can flash colors to give feedback that they’ve been hit or clicked.
Changing Mesh Part Colors »
While this script uses a normal Part to change color, it’s also possible to use this on MeshParts with an applied texture. MeshParts are often imported 3D models, rather than parts build directly in Roblox Studio.
If you are working with MeshParts, we advise the following:
Now that you’ve learned how to use tweens, try these optional challenges or expand your knowledge with one of the tutorials.
Optional Challenges »
- Tween a part so it changes to a color different than in the script.
- Scale a part so it grows bigger and smaller in one tween.
- Combine all the tweens shown here in one part.
Creating Your Own Tweens
Get more information on customizing and using tweens.
Animating GUI Elements
Make in-game menus more engaging and give feedback with animations.
Previous Next Steps