DX Login Animation

[FlyingSpoon]

function dxDrawLogin()
	    
  	    dxDrawImage(x*0,y*0,x*1280,y*720, "bg.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)
		
	    dxDrawText(guiGetText(edit_username), x*504, y*321, x*714, y*341, tocolor(255, 255, 255, 255), 1.00, "default", "left", "center", false, false, true, false, false)
        dxDrawText(string.rep ( "*", string.len ( guiGetText(edit_password) ) ), x*504, y*369, x*714, y*389, tocolor(255, 255, 255, 255), 1.00, "default", "left", "center", false, false, true, false, false)
		
		dxDrawText("Remember Credentials", x*560, y*416, x*700, y*438, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, true, false, false)
		

		local r,g,c
		if isMouseInPosition(x*452, y*448, x*335, y*41) then 
	    r,g,c = 0, 96, 93
		else
		r,g,c = 127, 169, 168
		end
	    dxDrawRectangle(x*452, y*448, x*335, y*41, tocolor(r,g,c, 127), true)
        dxDrawText("Sign In", x*451, y*448, x*787, y*489, tocolor(255, 255, 255, 255), 1.40, "default", "center", "center", false, false, true, false, false)
		
		
		local r,g,c
		if isMouseInPosition(x*452, y*499, x*335, y*41) then 
	    r,g,c = 0, 96, 93
		else
		r,g,c = 127, 169, 168
		end
		dxDrawRectangle(x*452, y*499, x*335, y*41, tocolor(r,g,c, 127), true)
        dxDrawText("Play As Guest", x*451, y*499, x*787, y*540, tocolor(255, 255, 255, 255), 1.40, "default", "center", "center", false, false, true, false, false)
	
end
addEventHandler("onClientRender", root, dxDrawLogin)

How would I slide all of this down with interpolateBetween? And what would the fastest way be to do this, because I want to animate multiple things in the same script?

[idarrr]

startLogin = getTickCount()

function dxDrawLogin()
	
	-- ANIMATION --
	local now = getTickCount()
	local elapsedTime = now - startLogin
	local duration = 1000 -- Duration 1 second or you can change it
	local progress = elapsedTime / duration
	
	local x1, y1 = 0, 0 -- Start point x and y anim
	local x2, y2 = 400, 400 -- End point x and y anim
	
	local x, y = interpolateBetween ( 
		x1, x1, 0, -- Start point x, y
		x2, x2, 0, -- End point x, y
		progress, "Linear") -- You can change the "Linear" string with another easing type
	-- ANIMATION --
	
	dxDrawImage(x*0,y*0,x*1280,y*720, "bg.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)

	dxDrawText(guiGetText(edit_username), x*504, y*321, x*714, y*341, tocolor(255, 255, 255, 255), 1.00, "default", "left", "center", false, false, true, false, false)
	dxDrawText(string.rep ( "*", string.len ( guiGetText(edit_password) ) ), x*504, y*369, x*714, y*389, tocolor(255, 255, 255, 255), 1.00, "default", "left", "center", false, false, true, false, false)

	dxDrawText("Remember Credentials", x*560, y*416, x*700, y*438, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, true, false, false)


	local r,g,c
	if isMouseInPosition(x*452, y*448, x*335, y*41) then 
	r,g,c = 0, 96, 93
	else
	r,g,c = 127, 169, 168
	end
	dxDrawRectangle(x*452, y*448, x*335, y*41, tocolor(r,g,c, 127), true)
	dxDrawText("Sign In", x*451, y*448, x*787, y*489, tocolor(255, 255, 255, 255), 1.40, "default", "center", "center", false, false, true, false, false)


	local r,g,c
	if isMouseInPosition(x*452, y*499, x*335, y*41) then 
	r,g,c = 0, 96, 93
	else
	r,g,c = 127, 169, 168
	end
	dxDrawRectangle(x*452, y*499, x*335, y*41, tocolor(r,g,c, 127), true)
	dxDrawText("Play As Guest", x*451, y*499, x*787, y*540, tocolor(255, 255, 255, 255), 1.40, "default", "center", "center", false, false, true, false, false)

end
addEventHandler("onClientRender", root, dxDrawLogin)

Don't forget to change x1, y1, x2, y2 value. That's just an example.

More details on wiki:

• interpolateBetween 
• Easing

[FlyingSpoon]

	local x, y = interpolateBetween ( 
		x1, x1, 0, -- Start point x, y
		x2, x2, 0, -- End point x, y
		progress, "Linear") -- You can change the "Linear" string with another easing type

x1, x1 or x1, y1, x2, y2

[Karuzo]

1 hour ago, raysmta said:

	local x, y = interpolateBetween ( 
		x1, x1, 0, -- Start point x, y
		x2, x2, 0, -- End point x, y
		progress, "Linear") -- You can change the "Linear" string with another easing type

x1, x1 or x1, y1, x2, y2

x1,y1,x2,y2

[idarrr]

@raysmta Sorry made a mistake, I was sleepy last night.

local x, y = interpolateBetween ( 
		x1, y1, 0, -- Start point x, y
		x2, y2, 0, -- End point x, y
		progress, "Linear")