DOCSEARCHbyAlgolia
Submit Docs

Flipper Animation Library

repository·master·Indexed 40 days ago

https://github.com/reselim/flipper

An animation library for Roblox (version 2.0.1) built around Motors and Goals. It provides smooth transitions using physics-based models like Springs and supports integration with Roact and roblox-ts.

Tokens
947
Snippets
4
Records
6
Agent score
0%

What's inside Flipper

  1. Install Flipper via Rojo

    master

    Depending on your Rojo version, use one of the following methods to add Flipper to your packages directory:

    For Rojo 0.6.x+

    Add the repository as a git submodule:

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

    For Rojo 0.5.x

    Manually copy the src folder from the Flipper repository into your packages directory.

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

  5. Use Flipper with Roact

    master

    To integrate Flipper animations with Roact, create a Flipper.SingleMotor in your component's init method. Use Roact.createBinding to track the motor's value and use self.motor:onStep(setBinding) to update the binding on every animation frame. This allows you to use binding:map() within your render function to derive properties like Size or Position from the animation state.

    To trigger animations, use self.motor:setGoal() with a goal type like Flipper.Spring.new(targetValue, options).

    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

  6. Access Flipper core modules

    master

    The Flipper module serves as the main entrypoint for the library. It provides access to motor types (SingleMotor, GroupMotor), spring physics (Spring), and various animation interpolation methods (Instant, Linear). It also includes a utility isMotor to identify motor objects.

    local Flipper = require(path.to.flipper)

-- Available modules:
-- Flipper.SingleMotor
-- Flipper.GroupMotor
-- Flipper.Spring
-- Flipper.Instant
-- Flipper.Linear
-- Flipper.isMotor