LightDirection tween plays with no animations

When hovering and leaving the button with my mouse, the script indicates the tween should play
The tween does work and changes LightDirection, but does not play the smooth transition
Here is my code:

local button = script.Parent
local tween = game:GetService("TweenService")
local viewport = button:WaitForChild("ViewportFrame")

local MouseEnterTween = tween:Create(viewport, TweenInfo.new(0.2, Enum.EasingStyle.Sine, Enum.EasingDirection.In), {LightDirection = Vector3.new(-1,-1,-1)})
local MouseLeaveTween = tween:Create(viewport, TweenInfo.new(0.2, Enum.EasingStyle.Sine, Enum.EasingDirection.Out), {LightDirection = Vector3.new(1,1,1)})

button.MouseEnter:Connect(function()
	MouseEnterTween:Play()
end)

button.MouseLeave:Connect(function()
	MouseLeaveTween:Play()
end)

Try changing 0.2 to a higher number like 2, because 0.2 might be too short to notice a transition.

Hi!

viewport frames update very diffrently depending on the “Render Quality” setting. Try to change the “Render Quality” setting to max and you will probably see the smooth transition. If “Render Quality” is set to Auto or low then viewport frames update very rarely, i think 1 time per second, so your tween becomes pointless.

Hi

If you are talking about Roblox Studio setting, it is already set to 21. Thanks for your message.

I already tried doing 1-2s transitions, still did not work, though thanks for your answer!

The issue is that the two tween targets are collinear, so as the tweens are performed, the actual direction of the light remains the same until progress gets past the midpoint, after which it instantly jumps to face the other direction. This won’t happen with non-collinear endpoints, but you’d ideally want to rotate about the origin rather than linearly interpolate between the points.

Here is an example that interpolates the LightDirection between the endpoints you have defined by specifying the idle endpoint via a CFrame, then rotating about that CFrame’s UpVector until it arrives at the active endpoint.

local RunService = game:GetService("RunService")
local TweenService = game:GetService("TweenService")

local button = script.Parent
local tween = game:GetService("TweenService")
local viewport = button:WaitForChild("ViewportFrame")

local IdleDirection = CFrame.lookAlong(
	Vector3.zero,
	Vector3.new(-1, -1, -1).Unit,
	Vector3.new(-1, 1, 1).Unit)

local RotateAngle = -math.pi

local TweenEasingDirection = Enum.EasingDirection.InOut
local TweenDuration = 0.2
local TweenEasingStyle = Enum.EasingStyle.Sine

local TweenProgress = 0
local TweenTarget = 0

local TweenConnection: RBXScriptConnection?

local function UpdateLightDirection(Delta: number): ()
	
	local Direction = math.sign(TweenTarget - TweenProgress)
	
	TweenProgress = math.clamp(TweenProgress + (Delta / TweenDuration) * Direction, 0, 1)
	
	local Angle = RotateAngle * TweenService:GetValue(TweenProgress, TweenEasingStyle, TweenEasingDirection)
	
	viewport.LightDirection = (IdleDirection * CFrame.Angles(0, Angle, 0)).LookVector
	
	if TweenProgress == TweenTarget and
		TweenConnection then
		
		TweenConnection:Disconnect()
		TweenConnection = nil
	end
end

local function PerformTween(): ()

	if TweenProgress ~= TweenTarget and
		not TweenConnection then

		TweenConnection = RunService.RenderStepped:Connect(UpdateLightDirection)
	end
end

button.MouseEnter:Connect(function()
	TweenTarget = 1
	PerformTween()
end)

button.MouseLeave:Connect(function()
	TweenTarget = 0
	PerformTween()
end)
1 Like

Wowies, I would have NEVER figured this out, thanks for your kind help! Your answer has been tagged the solution!

1 Like