### Add Flipper as a Git Submodule

Source: https://github.com/reselim/flipper/blob/master/README.md

Installs the Flipper library by adding its GitHub repository as a Git submodule into the 'packages' directory. This method is suitable for Rojo version 0.6.x and above.

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

--------------------------------

### Install Flipper via npm for Roblox-TS

Source: https://github.com/reselim/flipper/blob/master/README.md

Installs the Flipper npm package, specifically for use with roblox-ts projects. Requires npm or yarn to manage packages. This is a convenient method for TypeScript-based Roblox development.

```bash
npm i @rbxts/flipper
```

--------------------------------

### Spring Goal Physics Configurations in Lua

Source: https://context7.com/reselim/flipper/llms.txt

Details the configuration options for the Spring goal in Flipper, showcasing how to achieve different motion profiles like critically damped, underdamped (bouncy), and overdamped. It demonstrates setting a SingleMotor's goal with varying frequency and dampingRatio values to control oscillation speed and bounce behavior.

```lua
local Flipper = require(ReplicatedStorage.Flipper)

local motor = Flipper.SingleMotor.new(0)
motor:onStep(function(value)
    frame.Rotation = value
end)

-- Critically damped spring (no bounce, smoothest)
motor:setGoal(Flipper.Spring.new(360, {
    frequency = 4,      -- Higher = faster
    dampingRatio = 1    -- 1 = no overshoot
}))

-- Underdamped spring (bouncy effect)
motor:setGoal(Flipper.Spring.new(360, {
    frequency = 3,
    dampingRatio = 0.5  -- < 1 = bouncy
}))

-- Overdamped spring (slow, no oscillation)
motor:setGoal(Flipper.Spring.new(360, {
    frequency = 2,
    dampingRatio = 1.5  -- > 1 = sluggish
}))
```

--------------------------------

### SingleMotor Animation with Spring Goal in Lua

Source: https://context7.com/reselim/flipper/llms.txt

Demonstrates animating a single numeric value using SingleMotor and a Spring goal. It shows how to set up a motor, define step and completion callbacks, and apply a spring with custom frequency and damping ratio. The motor automatically handles Roblox RunService connections.

```lua
local Flipper = require(ReplicatedStorage.Flipper)

-- Create a motor starting at value 0
local motor = Flipper.SingleMotor.new(0)

-- Listen for value changes
motor:onStep(function(value)
    frame.Size = UDim2.new(0, 100, 0, 100):Lerp(UDim2.new(0, 200, 0, 200), value)
end)

-- Listen for animation completion
motor:onComplete(function()
    print("Animation finished!")
end)

-- Animate to 1 using a spring with custom physics
motor:setGoal(Flipper.Spring.new(1, {
    frequency = 5,      -- Oscillation rate (hz)
    dampingRatio = 0.8  -- How quickly oscillations decay
}))

-- Get current value at any time
print(motor:getValue()) -- Current interpolated value
```

--------------------------------

### Lua: Immediate Value Change with Flipper Instant

Source: https://context7.com/reselim/flipper/llms.txt

Instantly sets a motor's value without any interpolation using Flipper's Instant goal. This is ideal for resetting states or triggering discrete animations. It requires the Flipper library and a motor to manipulate.

```lua
local Flipper = require(ReplicatedStorage.Flipper)

local motor = Flipper.SingleMotor.new(0)
motor:onStep(function(value)
    frame.BackgroundTransparency = value
end)

-- Immediately set to 1 without animation
motor:setGoal(Flipper.Instant.new(1))

-- Useful for conditional animation chains
if shouldAnimate then
    motor:setGoal(Flipper.Spring.new(1))
else
    motor:setGoal(Flipper.Instant.new(1))
end

-- Reset state instantly before starting new animation
motor:setGoal(Flipper.Instant.new(0))
motor:setGoal(Flipper.Spring.new(1, { frequency = 5, dampingRatio = 0.7 }))
```

--------------------------------

### Roact Component with Flipper Animations

Source: https://github.com/reselim/flipper/blob/master/README.md

Demonstrates how to use Flipper to animate a Roact ImageButton. The button shrinks when pressed and returns to its original size when released, using Flipper's SingleMotor and Spring goals. Requires Flipper and Roact libraries.

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

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

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

	sself.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()
			sself.motor:setGoal(Flipper.Spring.new(1, {
				frequency = 5,
				dampingRatio = 1
			}))
		end,

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

return Example
```

--------------------------------

### Lua: Mouse Tracking Animation with Flipper GroupMotor

Source: https://context7.com/reselim/flipper/llms.txt

Implements a smooth cursor-following effect using Flipper's GroupMotor and spring physics. It connects to UserInputService to track mouse movements and updates a UI element's position accordingly. This requires Flipper, UserInputService, and a UI element.

```lua
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Flipper = require(ReplicatedStorage.Flipper)

-- Create motor for X and Y coordinates
local motor = Flipper.GroupMotor.new({
    X = 0,
    Y = 0
})

-- Create UI element that follows cursor
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0, 40, 0, 40)
frame.AnchorPoint = Vector2.new(0.5, 0.5)
frame.BackgroundColor3 = Color3.new(1, 1, 1)

-- Update frame position on each animation step
motor:onStep(function(values)
    frame.Position = UDim2.new(0, values.X, 0, values.Y)
end)

motor:onComplete(function()
    print("Reached target position")
end)

-- Track mouse movement with spring animation
UserInputService.InputChanged:Connect(function(input)
    if input.UserInputType == Enum.UserInputType.MouseMovement then
        motor:setGoal({
            X = Flipper.Spring.new(input.Position.X, {
                frequency = 3.5,
                dampingRatio = 0.5  -- Bouncy following effect
            }),
            Y = Flipper.Spring.new(input.Position.Y, {
                frequency = 3.5,
                dampingRatio = 0.5
            })
        })
    end
end)
```

--------------------------------

### Lua: Roact UI Component Animation with Flipper

Source: https://context7.com/reselim/flipper/llms.txt

Integrates Flipper's SingleMotor with Roact bindings to create reactive animated UI components. The motor's state changes automatically update Roact bindings, triggering re-renders. This requires Flipper, Roact, and a Roact component structure.

```lua
local Roact = require(ReplicatedStorage.Roact)
local Flipper = require(ReplicatedStorage.Flipper)

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

function AnimatedButton:init()
    -- Create motor with initial value
    self.motor = Flipper.SingleMotor.new(0)

    -- Create Roact binding tied to motor
    local binding, setBinding = Roact.createBinding(self.motor:getValue())
    self.binding = binding

    -- Update binding whenever motor steps
    self.motor:onStep(setBinding)
end

function AnimatedButton:render()
    return Roact.createElement("TextButton", {
        Size = self.binding:map(function(value)
            -- Interpolate between normal and pressed size
            return UDim2.new(0, 100, 0, 100):Lerp(UDim2.new(0, 90, 0, 90), value)
        end),

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

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

function AnimatedButton:willUnmount()
    -- Clean up motor connection
    self.motor:destroy()
end

return AnimatedButton
```

--------------------------------

### GroupMotor Animation with Mixed Goals in Lua

Source: https://context7.com/reselim/flipper/llms.txt

Illustrates animating multiple related values simultaneously using GroupMotor. This snippet shows how to initialize GroupMotor with multiple properties, update UI elements based on all values, and apply different goal types (Spring and Linear) to different properties. It also demonstrates accessing all current values.

```lua
local Flipper = require(ReplicatedStorage.Flipper)

-- Create motor with initial position and color values
local motor = Flipper.GroupMotor.new({
    X = 100,
    Y = 200,
    Transparency = 0
})

-- Update frame based on all values
motor:onStep(function(values)
    frame.Position = UDim2.new(0, values.X, 0, values.Y)
    frame.BackgroundTransparency = values.Transparency
end)

-- Animate multiple properties with different goals
motor:setGoal({
    X = Flipper.Spring.new(500, { frequency = 4, dampingRatio = 1 }),
    Y = Flipper.Spring.new(300, { frequency = 4, dampingRatio = 1 }),
    Transparency = Flipper.Linear.new(0.5, { velocity = 2 })
})

-- Access all current values
local values = motor:getValue()
print(values.X, values.Y, values.Transparency)
```

--------------------------------

### Manual Motor Control with Custom Animation Loop

Source: https://context7.com/reselim/flipper/llms.txt

Manually control Flipper motors by disabling implicit connections and calling step() in a custom update loop. This is ideal for synchronized animations or integration with external timing systems, offering fine-grained control over animation updates and batching.

```lua
local Flipper = require(ReplicatedStorage.Flipper)
local RunService = game:GetService("RunService")

-- Create motor with implicit connections disabled
local motor = Flipper.SingleMotor.new(0, false)

motor:onStep(function(value)
    frame.BackgroundTransparency = value
end)

-- Set goal but don't auto-connect to RunService
motor:setGoal(Flipper.Spring.new(1, {
    frequency = 4,
    dampingRatio = 1
}))

-- Manually step the motor in custom update loop
local connection = RunService.Heartbeat:Connect(function(deltaTime)
    local isComplete = motor:step(deltaTime)

    if isComplete then
        connection:Disconnect()
        print("Manual animation complete")
    end
end)

-- Or use start/stop for manual connection management
motor:start()  -- Begin automatic updates
-- ... later ...
motor:stop()   -- Pause animation
motor:destroy() -- Clean up entirely
```

--------------------------------

### Lua: Constant Velocity Animation with Flipper Linear

Source: https://context7.com/reselim/flipper/llms.txt

Animates a UI element towards a target value at a constant speed using Flipper's Linear goal. This is useful for progress bars or timers where predictable timing is essential. It requires the Flipper library and a UI element to update.

```lua
local Flipper = require(ReplicatedStorage.Flipper)

local motor = Flipper.SingleMotor.new(0)
motor:onStep(function(value)
    progressBar.Size = UDim2.new(value, 0, 1, 0)
end)

-- Move from 0 to 1 at constant speed
motor:setGoal(Flipper.Linear.new(1, {
    velocity = 0.5  -- Units per second
}))

-- Fast linear animation
motor:setGoal(Flipper.Linear.new(0, {
    velocity = 2  -- Higher = faster
}))
```

--------------------------------

### isMotor Utility for Type Checking

Source: https://context7.com/reselim/flipper/llms.txt

Use the isMotor utility function to determine if a value is a Flipper motor and retrieve its type (Single or Group). This is crucial for safe type checking within mixed data structures, especially in GroupMotor scenarios.

```lua
local Flipper = require(ReplicatedStorage.Flipper)

local motor = Flipper.SingleMotor.new(0)
local group = Flipper.GroupMotor.new({ X = 0, Y = 0 })
local number = 42

-- Check if value is a motor
local isMotor, motorType = Flipper.isMotor(motor)
print(isMotor)    -- true
print(motorType)  -- "Single"

local isMotor, motorType = Flipper.isMotor(group)
print(isMotor)    -- true
print(motorType)  -- "Group"

local isMotor, motorType = Flipper.isMotor(number)
print(isMotor)    -- false
print(motorType)  -- nil

-- Practical usage in functions
local function animateValue(target, goal)
    if Flipper.isMotor(target) then
        target:setGoal(goal)
    else
        warn("Expected motor, got", typeof(target))
    end
end
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.