interpolateBetween [HELP]

[FlyingSpoon]

How can I use interpolateBetween or something similar so my Dx Window with everything linked to it opens.

Can anyone show me an example? Thanks!

local screenW, screenH = guiGetScreenSize() 
  
addEventHandler("onClientRender", root, 
    function() 
        dxDrawRectangle(screenW * 0.0947, screenH * 0.1784, screenW * 0.8369, screenH * 0.6445, tocolor(62, 62, 62, 255), false) 
        dxDrawRectangle(screenW * 0.0947, screenH * 0.1654, screenW * 0.8369, screenH * 0.0638, tocolor(0, 0, 0, 255), false) 
        dxDrawText("#MvP!", screenW * 0.1045, screenH * 0.1771, screenW * 0.1846, screenH * 0.2161, tocolor(255, 136, 8, 255), 2.00, "sans", "left", "top", false, false, false, false, false) 
        dxDrawText("Dashboard", screenW * 0.1846, screenH * 0.1771, screenW * 0.3154, screenH * 0.2161, tocolor(255, 255, 255, 255), 2.00, "sans", "left", "top", false, false, false, false, false) 
        dxDrawRectangle(screenW * 0.3076, screenH * 0.2474, screenW * 0.6143, screenH * 0.5521, tocolor(255, 255, 255, 197), false) 
        dxDrawImage(screenW * 0.3174, screenH * 0.2539, screenW * 0.5947, screenH * 0.2839, ":mvpDashboard/images/home.png", 0, 0, 0, tocolor(255, 255, 255, 255), false) 
        dxDrawRectangle(screenW * 0.1025, screenH * 0.2474, screenW * 0.2002, screenH * 0.0521, tocolor(90, 90, 90, 255), false) 
        dxDrawRectangle(screenW * 0.1025, screenH * 0.3073, screenW * 0.2002, screenH * 0.0521, tocolor(90, 90, 90, 255), false) 
        dxDrawRectangle(screenW * 0.1025, screenH * 0.3672, screenW * 0.2002, screenH * 0.0521, tocolor(90, 90, 90, 255), false) 
        dxDrawRectangle(screenW * 0.1025, screenH * 0.4271, screenW * 0.2002, screenH * 0.0521, tocolor(90, 90, 90, 255), false) 
    end 
) 

I want to make this all bounce in/open using interpolate animation! Thanks.

[Bonsai]

What did you try so far?

I think you need to save the original position of each "element" or make them all depend on a shared value using an offset.

Then use interpolateBetween until a target position is reached.

In order to make it go back you need to use interpolateBetween again until the original positon is reached.

[FlyingSpoon]

I don't understand how it works, so I was thinking maybe someone can explain it to me, because I dont understand the Wiki.

[Revolt]

local screenX, screenY = guiGetScreenSize() 
local width = dxGetTextWidth("Test Text", 2) 
local height = dxGetFontHeight(2) 
local completion = 0 
  
local function prerender(deltaTime) 
    if (completion < 1) then 
        completion = completion + deltaTime / 3000 -- It'll take 3 seconds to scroll the text to the edge of the screen 
    end 
end 
addEventHandler("onClientPreRender", root, prerender) 
  
local function render() 
    local x, y = interpolateBetween(0, 0, 0, screenX - width, screenY - height, 0, completion, "Linear") -- [url=https://wiki.multitheftauto.com/wiki/Easing]https://wiki.multitheftauto.com/wiki/Easing[/url] 
    dxDrawText("Test Text", x, y, width, height, 0xFFFFFFFF, 2) 
end 
addEventHandler("onClientRender", root, render) 

This is an example how you can use interpolateBetween (..) for the intro scroll. I guess for bouncing that you could use sine of time since execution (you can create a variable and add delta time to it each pre-render event).