Skip to main content

​
Quick Start

exports.lation_ui:showTimeline({
    id = 'my_mission',
    title = 'Mission Objectives',
    tasks = {
        { id = 'task1', label = 'First objective', status = 'completed' },
        { id = 'task2', label = 'Current objective', status = 'active' },
        { id = 'task3', label = 'Next objective', status = 'pending' }
    }
})

​
Functions

Display a timeline with tasks to the player.
exports.lation_ui:showTimeline(data)
Parameters:
  • data (table) - Timeline configuration object (see Options)
Only one timeline can be active at a time. Showing a new timeline will automatically hide any existing timeline.
Hide a specific timeline.
exports.lation_ui:hideTimeline(id)
Parameters:
  • id (string) - Unique identifier of the timeline to hide
Timeline state is not preserved when hidden. You must pass the full configuration when showing again.
Update one or multiple task statuses.
-- Single task update
exports.lation_ui:updateTimelineTask(timelineId, taskId, status)

-- Multiple tasks update (recommended for sequential progression)
exports.lation_ui:updateTimelineTask(timelineId, tasksArray)
Parameters (Single Task):
  • timelineId (string) - Unique identifier of the timeline
  • taskId (string) - Unique identifier of the task to update
  • status (string) - New status: 'pending', 'active', 'completed', 'failed'
Parameters (Multiple Tasks):
  • timelineId (string) - Unique identifier of the timeline
  • tasksArray (table) - Array of task objects with id and status properties
Add a new task to an existing timeline.
exports.lation_ui:addTimelineTask(timelineId, task)
Parameters:
  • timelineId (string) - Unique identifier of the timeline
  • task (table) - Task object (see Tasks)
Update timeline properties (title, description, icon, etc.).
exports.lation_ui:updateTimeline(timelineId, updates)
Parameters:
  • timelineId (string) - Unique identifier of the timeline
  • updates (table) - Object containing properties to update (see Options)
Get the ID of the currently active timeline.
local timelineId = exports.lation_ui:getActiveTimeline()
Returns:
  • timelineId (string | nil) - The ID of the active timeline, or nil if none is active

​
Configuration

​
Options

​
id
string
required
Unique timeline identifier
​
title
string
required
Timeline title (supports markdown)
​
description
string
Timeline description (supports markdown)
​
position
string
default:"right-center"
Timeline position on screenAvailable options: 'top-left', 'top-center', 'top-right', 'left-center', 'center', 'right-center', 'bottom-left', 'bottom-center', 'bottom-right'
​
icon
string
FontAwesome icon class
​
iconColor
string
default:"#71717A"
Icon color (hex or CSS color name)
​
iconAnimation
string
Icon animation typeAvailable options: 'spin', 'spinPulse', 'spinReverse', 'pulse', 'beat', 'fade', 'beatFade', 'bounce', 'shake'
​
tasks
table
required
Array of task objects (see Tasks)
​
opacity
number
default:"1.0"
Background opacity (0.0-1.0)

​
Tasks

Each task object in the tasks array supports:
​
id
string
required
Unique task identifier
​
label
string
required
Task display text (supports markdown)
​
description
string
Task description (supports markdown)
​
status
string
required
Task statusAvailable options: 'pending', 'active', 'completed', 'failed'
​
icon
string
FontAwesome icon class
Overrides default status icon
​
iconColor
string
Icon color (hex or CSS color name)
Automatically determined by task status if not specified
​
iconAnimation
string
Icon animation type
Custom task icons do not auto-animate unless iconAnimation is explicitly set

​
Examples

-- Show a timeline with mission tasks
exports.lation_ui:showTimeline({
    id = 'heist_mission',
    title = 'Bank Heist',
    description = 'Complete all objectives to finish the heist',
    position = 'right-center',
    icon = 'fas fa-mask',
    iconColor = '#EF4444',
    opacity = 0.95,
    tasks = {
        { 
            id = 'gear', 
            label = 'Acquire equipment', 
            description = 'Get supplies from the warehouse',
            status = 'completed'
        },
        { 
            id = 'hack', 
            label = 'Hack security system', 
            description = 'Disable cameras and alarms',
            status = 'active'
        },
        { 
            id = 'vault', 
            label = 'Access the vault', 
            status = 'pending'
        },
        { 
            id = 'escape', 
            label = 'Escape the area', 
            status = 'pending'
        }
    }
})

​
Preview

Timeline Preview