@rbxts/flipper NPM

Installation

Rojo

0.6.x+

Add this repository as a submodule into your packages directory. This example assumes the directory is packages.

git submodule add https://github.com/Reselim/Flipper packages/Flipper

0.5.x

Copy the src folder from this repository into your packages directory.

npm (for roblox-ts)

Install the @rbxts/flipper package using npm or yarn.

npm i @rbxts/flipper

Without Rojo

Download the latest .rbxm file from the releases page and drag it into studio.

Usage

With Roact

This example creates a button that shrinks when pressed.

local Example = Roact.Component:extend("Example")

function Example:init()
	self.motor = Flipper.SingleMotor.new(0)

	local binding, setBinding = Roact.createBinding(self.motor:getValue())
	self.binding = binding

	self.motor:onStep(setBinding)
end

function Example:render()
	return Roact.createElement("ImageButton", {
		Size = self.binding:map(function(value)
			return UDim2.new(0, 100, 0, 100):Lerp(UDim2.new(0, 80, 0, 80), value)
		end),
		Position = UDim2.new(0.5, 0, 0.5, 0),
		AnchorPoint = Vector2.new(0.5, 0.5),

		[Roact.Event.MouseButton1Down] = function()
			self.motor:setGoal(Flipper.Spring.new(1, {
				frequency = 5,
				dampingRatio = 1
			}))
		end,

		[Roact.Event.MouseButton1Up] = function()
			self.motor:setGoal(Flipper.Spring.new(0, {
				frequency = 4,
				dampingRatio = 0.75
			}))
		end
	})
end

return Example

Flipper works wonderfully with Roact on its own, but if you plan on using it for a lot of your components, roact-flipper will make that much easier.