Button Binder | Bind Custom Animations to Buttons

:package: Get Started!

  • What is Button Binder? Button Binder helps you create custom animations, and then bind them on different buttons, for instance:

Bad Practice

local ShootButton = script.Parent.Shoot
local ReloadButton = script.Parent.Reload
local SettingsButton = script.Parent.Settings
local EmoteButton = script.Parent.Emote

ReloadButton.MouseButton1Click:Connect(function()
    local Size = UDim2.new(ReloadButton.Size.Scale.X * 1.3, ReloadButton.Size.Offset.X * 1.3, ReloadButton.Size.Scale.Y * 1.3, ReloadButton.Size.Offset.Y * 1.3)
    ReloadButton:TweenSize(Size)
end)
ShootButton.MouseButton1Click:Connect(function()
    local Size = UDim2.new(ShootButton.Size.Scale.X * 1.3, ShootButton.Size.Offset.X * 1.3, ShootButton.Size.Scale.Y * 1.3, ShootButton.Size.Offset.Y * 1.3)
    ReloadButton:TweenSize(Size)
end)
SettingsButton.MouseButton1Click:Connect(function()
    local Size = UDim2.new(SettingsButton.Size.Scale.X * 1.3, SettingsButton.Size.Offset.X * 1.3, SettingsButton.Size.Scale.Y * 1.3, SettingsButton.Size.Offset.Y * 1.3)
    SettingsButton:TweenSize(Size)
end)
EmoteButton.MouseButton1Click:Connect(function()
    local Size = UDim2.new(EmoteButton.Size.Scale.X * 1.3, EmoteButton.Size.Offset.X * 1.3, EmoteButton.Size.Scale.Y * 1.3, EmoteButton.Size.Offset.Y * 1.3)
    EmoteButton:TweenSize(Size)
end)

With Button Binder…

local ShootButton = script.Parent.Shoot
local ReloadButton = script.Parent.Reload
local SettingsButton = script.Parent.Settings
local EmoteButton = script.Parent.Emote

local ButtonBinder = require(game.ReplicatedStorage.Button)

ButtonBinder:AddAnimation("MouseButton1Down", "Tween", function(Button)
    local Size = UDim2.new(Button.Size.Scale.X * 1.3, Button.Size.Offset.X * 1.3, Button.Size.Scale.Y * 1.3, Button.Size.Offset.Y * 1.3)
    Button:TweenSize(Size)
end)

ButtonBinder:Bind(ShootButton, "Tween")
ButtonBinder:Bind(ReloadButton, "Tween")
ButtonBinder:Bind(SettingsButton, "Tween")
ButtonBinder:Bind(EmoteButton, "Tween")

Now you might be telling me… You can easily make a function and call it on every button, Example:

local function Tween(Button)
    local Size = UDim2.new(Button.Size.Scale.X * 1.3, Button.Size.Offset.X * 1.3, Button.Size.Scale.Y * 1.3, Button.Size.Offset.Y * 1.3)
    Button:TweenSize(Size)
end

But no, what’s nice about Button Binder is you can create animations, and then reuse them from different scripts,

  • The 1st argument is the button event (Example: “MouseButton1Down”, “MouseEnter”, “MouseLeave”, etc…)
  • The 2nd argument is your animation name you can put your own (Example: “Banana”, “ClickAnimation”, “Click”, etc…)
  • The 3rd argument is your function, the function you wanna play when the user clicks or whatever also you have to put “Button” on the function’s argument as show below
local ButtonBinder = require(game.ReplicatedStorage.Button)
    ButtonBinder:AddAnimation("MouseButton1Down", "Tween", function(Button)
        local Size = UDim2.new(Button.Size.Scale.X * 1.3, Button.Size.Offset.X * 1.3, Button.Size.Scale.Y * 1.3, Button.Size.Offset.Y * 1.3)
        Button:TweenSize(Size)
    end)
  • After that you just have to bind the buttons you want
  • The first argument is the button you want to bind the animation to
  • The second argument is the Animation Name of the Animation we just created which in my example would be "Tween"

ButtonBinder:Bind(Button, "Tween")

:white_check_mark: Download

ButtonBinder.rbxm (1.5 KB)

Sorry if my explanation was bad this is my first community resource, if you have any questions please feel free to ask them down below, I would love to answer them, Thanks.

6 Likes

I’ll hopefully be adding more features, updates to this if this gets attention and is wanted by the developer community.

1 Like

pls send a vid of it working and it sounds good

1 Like