Issue with tweening ui position

i’m trying to make a sort of “sine wave” effect with particles floating upward from the bottom of the screen.
the whole moving left and right thing works, but it just stays stuck to the bottom of the screen (as seen)
image

they’re supposed to float upward (obviously) as well as move left and right at the same time.
(Ignore the fact that they’re stuck on the left side of the screen, i haven’t made the part where the bounding box of the particles are scattered across the bottom of the screen yet)

local function particleSystem(particleBoundingFrame, particle)
	local particleDuration = math.random(1000, 3000) / 1000
	local amountOfBounceCycles = math.random(1, 4)
	local bounceDuration = particleDuration / amountOfBounceCycles
	
	local tweenParticleToTop = TweenService:Create(particle, TweenInfo.new(particleDuration), {Position = UDim2.new(particle.Position.X.Scale, particle.Position.X.Offset, 0, 0)})
	local tweenParticleBounceRight = TweenService:Create(particle, TweenInfo.new(bounceDuration, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut), {Position = UDim2.new(1, 0, particle.Position.Y.Scale, particle.Position.Y.Offset)})
	local tweenParticleBounceLeft = TweenService:Create(particle, TweenInfo.new(bounceDuration, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut), {Position = UDim2.new(0, 0, particle.Position.Y.Scale, particle.Position.Y.Offset)})
	local tweenParticleTransparency = TweenService:Create(particle, TweenInfo.new(particleDuration), {BackgroundTransparency = 1})
	particleBoundingFrame.Size = UDim2.new(math.random(1, 3) / 10, 0, math.random(2, 6) / 10, 0)
	tweenParticleToTop:Play()
	tweenParticleTransparency:Play()
	local particleActivated = true
	
	task.delay(particleDuration, function()
		particleActivated = false
	end)
	
	----[[
	while particleActivated do
		tweenParticleToTop:Play()
		local currentY = particle.Position.Y
		print(currentY)

		local tweenRight = TweenService:Create(
			particle,
			TweenInfo.new(bounceDuration, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut),
			{ Position = UDim2.new(1, 0, currentY.Scale, currentY.Offset) }
		)
		tweenRight:Play()
		tweenRight.Completed:Wait()
		if not particleActivated then break end

		currentY = particle.Position.Y

		local tweenLeft = TweenService:Create(
			particle,
			TweenInfo.new(bounceDuration, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut),
			{ Position = UDim2.new(0, 0, currentY.Scale, currentY.Offset) }
		)
		tweenLeft:Play()
		tweenLeft.Completed:Wait()
	end
	
	particleBoundingFrame:Destroy()
	--]]
end

(the --[[ comment stuff is there for debugging, ignore that)
i think the issue is that the “currentY” variable is static and isn’t changed, overriding the other tween? is there any way to make the tweens only affect the x/y values of the positions? if not, is there another option?

it seems the tweenParticleToTop tween is getting overwritten by the other tweens.

A possible solution for this issue is to make it so the tweens affect different objects - have the particle be parented to a transparent frame of the same size as the particle. Then, tween the transparent frame Up/Down, and tween the particle left/right (or vice versa). Note that the scale for the particle’s movements will need to be adjusted, as it is no longer relative to the screen size