Simple eased pan animated motion .shader filter plugin 1.0

graveyard420woo · Aug 26, 2025

graveyard420woo submitted a new resource:

Simple eased pan animated motion .shader plugin - A simple eased, looping pan for a layer that exceeds the horizontal edges of the frame

I swear this has to exist somewhere.. I have needed this simple animation capability for a panning background layer, with easing, in OBS and could not find a basic plugin to do it quickly and easily. I just wrote this one. hopefully this helps someone.. This .shader file is meant to be used with Exeldro's fantastic OBS-shaderfilter. Simply extract to obs-shaderfilter's examples folder and load the filter from file or copy the text from the .shader file into a new User-defined shader.

Read more about this resource...

jdpm93 · Sep 15, 2025

Man, a huge Thank you!, I have a 2K webcam and with this I can play with the image and give de sense of panning a normal camera.

jdpm93 · Sep 15, 2025

I want to share a code that adds a time parameter to the pan effect and another code for zoom effect inspired in pan effect, also with a time parameter. Copy de code following graveyard420woo instructions or download the files and reset after loading. It was created with AI help I don't know about code so there may be errors.

Pan

Code:

// Pan effect with cycle duration for OBS ShaderFilter

uniform float speed <
    string label = "Speed";
    string widget_type = "slider";
    float minimum = 0.001;
    float maximum = 1.0;
    float step = 0.001;
> = 0.2;

uniform float pan_amount <
    string label = "Pan Amount (%)";
    string widget_type = "slider";
    float minimum = 0.0;
    float maximum = 50.0;
    float step = 1.0;
> = 10.0;

uniform float pan_cycle_duration <
    string label = "Pan Cycle Duration (seconds)";
    string widget_type = "slider";
    float minimum = 0.1;
    float maximum = 60.0;
    float step = 0.1;
> = 2.0;

// Easing function for smooth acceleration and deceleration
float easeInOutCubic(float t) {
    t *= 2.0;
    if (t < 1.0) {
        return 0.5 * t * t * t;
    }
    t -= 2.0;
    return 0.5 * (t * t * t + 2.0);
}

// Ping-pong for oscillation 0->1->0 based on time and duration
float pingPongCycle(float time, float duration) {
    float cycleTime = fmod(time, duration);
    float pingPong = cycleTime / (duration / 2.0);
    if (pingPong > 1.0) {
        pingPong = 2.0 - pingPong;
    }
    return pingPong;
}

float4 mainImage(VertData v_in) : TARGET
{
    float time = elapsed_time * speed;
    float pingPong = pingPongCycle(time, pan_cycle_duration);
    float easedTime = easeInOutCubic(pingPong);
    float travel_distance = pan_amount / 100.0;
    float offsetX = (easedTime - 0.5) * 2.0 * travel_distance;
    float2 uv = v_in.uv;
    uv.x -= offsetX;
    return image.Sample(textureSampler, uv);
}

zoom

Code:

// Zoom effect with cycle duration for OBS ShaderFilter

uniform float speed <
    string label = "Speed";
    string widget_type = "slider";
    float minimum = 0.001;
    float maximum = 1.0;
    float step = 0.001;
> = 0.2;

uniform float zoom_amount <
    string label = "Zoom Amount (%)";
    string widget_type = "slider";
    float minimum = 0.0;
    float maximum = 50.0;
    float step = 1.0;
> = 10.0;

uniform float zoom_cycle_duration <
    string label = "Zoom Cycle Duration (seconds)";
    string widget_type = "slider";
    float minimum = 0.1;
    float maximum = 60.0;
    float step = 0.1;
> = 4.0;

// Easing function for smooth acceleration and deceleration
float easeInOutCubic(float t) {
    t *= 2.0;
    if (t < 1.0) {
        return 0.5 * t * t * t;
    }
    t -= 2.0;
    return 0.5 * (t * t * t + 2.0);
}

// Ping-pong for oscillation 0->1->0 based on time and duration
float pingPongCycle(float time, float duration) {
    float cycleTime = fmod(time, duration);
    float pingPong = cycleTime / (duration / 2.0);
    if (pingPong > 1.0) {
        pingPong = 2.0 - pingPong;
    }
    return pingPong;
}

float4 mainImage(VertData v_in) : TARGET
{
    float time = elapsed_time * speed;
    float pingPong = pingPongCycle(time, zoom_cycle_duration);
    float easedTime = easeInOutCubic(pingPong);
    float zoomFactor = 1.0 + (zoom_amount / 100.0) * (easedTime - 0.5) * 2.0;
    zoomFactor = max(zoomFactor, 0.001); // Prevent division by zero
    float2 center = float2(0.5, 0.5);
    float2 uv = center + (v_in.uv - center) / zoomFactor;
    return image.Sample(textureSampler, uv);
}

graveyard420woo · Sep 15, 2025

jdpm93 said:
Man, a huge Thank you!, I have a 2K webcam and with this I can play with the image and give de sense of panning a normal camera.

You are welcome!! I am thrilled to hear it is being used on live footage, too cool!

jdpm93 · Sep 16, 2025

I'm adding again the files in .txt format because .effect made my OBS go very slow.

jdpm93 said:

I want to share a code that adds a time parameter to the pan effect and another code for zoom effect inspired in pan effect, also with a time parameter. Copy de code following graveyard420woo instructions or download the files and reset after loading. It was created with AI help I don't know about code so there may be errors.

Pan

Code:

// Pan effect with cycle duration for OBS ShaderFilter

uniform float speed <
    string label = "Speed";
    string widget_type = "slider";
    float minimum = 0.001;
    float maximum = 1.0;
    float step = 0.001;
> = 0.2;

uniform float pan_amount <
    string label = "Pan Amount (%)";
    string widget_type = "slider";
    float minimum = 0.0;
    float maximum = 50.0;
    float step = 1.0;
> = 10.0;

uniform float pan_cycle_duration <
    string label = "Pan Cycle Duration (seconds)";
    string widget_type = "slider";
    float minimum = 0.1;
    float maximum = 60.0;
    float step = 0.1;
> = 2.0;

// Easing function for smooth acceleration and deceleration
float easeInOutCubic(float t) {
    t *= 2.0;
    if (t < 1.0) {
        return 0.5 * t * t * t;
    }
    t -= 2.0;
    return 0.5 * (t * t * t + 2.0);
}

// Ping-pong for oscillation 0->1->0 based on time and duration
float pingPongCycle(float time, float duration) {
    float cycleTime = fmod(time, duration);
    float pingPong = cycleTime / (duration / 2.0);
    if (pingPong > 1.0) {
        pingPong = 2.0 - pingPong;
    }
    return pingPong;
}

float4 mainImage(VertData v_in) : TARGET
{
    float time = elapsed_time * speed;
    float pingPong = pingPongCycle(time, pan_cycle_duration);
    float easedTime = easeInOutCubic(pingPong);
    float travel_distance = pan_amount / 100.0;
    float offsetX = (easedTime - 0.5) * 2.0 * travel_distance;
    float2 uv = v_in.uv;
    uv.x -= offsetX;
    return image.Sample(textureSampler, uv);
}

zoom

Code:

// Zoom effect with cycle duration for OBS ShaderFilter

uniform float speed <
    string label = "Speed";
    string widget_type = "slider";
    float minimum = 0.001;
    float maximum = 1.0;
    float step = 0.001;
> = 0.2;

uniform float zoom_amount <
    string label = "Zoom Amount (%)";
    string widget_type = "slider";
    float minimum = 0.0;
    float maximum = 50.0;
    float step = 1.0;
> = 10.0;

uniform float zoom_cycle_duration <
    string label = "Zoom Cycle Duration (seconds)";
    string widget_type = "slider";
    float minimum = 0.1;
    float maximum = 60.0;
    float step = 0.1;
> = 4.0;

// Easing function for smooth acceleration and deceleration
float easeInOutCubic(float t) {
    t *= 2.0;
    if (t < 1.0) {
        return 0.5 * t * t * t;
    }
    t -= 2.0;
    return 0.5 * (t * t * t + 2.0);
}

// Ping-pong for oscillation 0->1->0 based on time and duration
float pingPongCycle(float time, float duration) {
    float cycleTime = fmod(time, duration);
    float pingPong = cycleTime / (duration / 2.0);
    if (pingPong > 1.0) {
        pingPong = 2.0 - pingPong;
    }
    return pingPong;
}

float4 mainImage(VertData v_in) : TARGET
{
    float time = elapsed_time * speed;
    float pingPong = pingPongCycle(time, zoom_cycle_duration);
    float easedTime = easeInOutCubic(pingPong);
    float zoomFactor = 1.0 + (zoom_amount / 100.0) * (easedTime - 0.5) * 2.0;
    zoomFactor = max(zoomFactor, 0.001); // Prevent division by zero
    float2 center = float2(0.5, 0.5);
    float2 uv = center + (v_in.uv - center) / zoomFactor;
    return image.Sample(textureSampler, uv);
}

Simple eased pan animated motion .shader filter plugin 1.0

graveyard420woo

New Member

jdpm93

New Member

jdpm93

New Member

Attachments

graveyard420woo

New Member

jdpm93

New Member

Attachments