How to achieve egg hatch animation without the use of viewportframes

[Aceleith]

1. What do you want to achieve?
   I want both egg model and pet to be able to rotate whilst keeping the egg at the center of the screen even if the player is moving around.
2. What is the issue?
   Whenever I rotate the object jitters.
3. What solutions have you tried so far?
   I have searched on the devforum and found that this is the way most simulators do their hatch animation, but I can’t seem to find how they do the rotating part.

local function Hatch()
		local Blur = Instance.new("DepthOfFieldEffect")
		Blur.Parent = game.Lighting
				
		if Egg then else return end
		
		local EggModel = Egg:Clone()
		EggModel.Parent = workspace
		EggModel.CastShadow = false
		EggModel.CanCollide = false
		EggModel.CanTouch = false
		
		EggModel.CFrame = Camera.CFrame * CFrame.Angles(0, math.rad(90), 0)
		EggModel.CFrame = Camera.CFrame * CFrame.new(0, -10, -6)
		
		TweenService:Create(EggModel, TweenInfo.new(0.75, Enum.EasingStyle.Back, Enum.EasingDirection.In), {CFrame = Camera.CFrame * CFrame.new(0, 0, -8)}):Play()
		task.wait(1)
		
		EggThread = task.spawn(function()
			RunService:BindToRenderStep("...", Enum.RenderPriority.Camera.Value + 1, function()
				EggModel.CFrame = Camera.CFrame * CFrame.new(0, 0, -8)
			end)
		end)
		
		TweenService:Create(EggModel, TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {CFrame = Camera.CFrame * CFrame.Angles(0, 0, math.rad(-45))}):Play()
		task.wait(0.5)
		TweenService:Create(EggModel, TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {CFrame = Camera.CFrame * CFrame.Angles(0, 0, math.rad(45))}):Play()
		task.wait(0.5)
		TweenService:Create(EggModel, TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {CFrame = Camera.CFrame * CFrame.Angles(0, 0, 0)}):Play()
		task.wait(0.5)
		TweenService:Create(EggModel, TweenInfo.new(0.4, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {Size = Vector3.new(2.4, 3.3, 2.45)}):Play()
		task.wait(0.8)
		TweenService:Create(EggModel, TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {Size = Vector3.new(4.802, 6.672, 4.917), Transparency = 1}):Play()
		task.wait(0.2)
		
		for _, v in pairs(Frame:GetDescendants()) do
			if v:IsA("TextLabel") then
				v.TextTransparency = 1
			elseif v:IsA("UIStroke") then
				v.Transparency = 1
			end
		end
			
		EggHatch.Frame.PetName.Text = hatchedPet[1]
		EggHatch.Frame.PetRarity.Text = petRarity.." ("..hatchedPet[2].."%)"
		EggHatch.Frame.PetRarity.TextColor3 = PetRarityColors[petRarity]
		EggHatch.Enabled = true
		
		for _, v in pairs(Frame:GetDescendants()) do
			if v:IsA("TextLabel") then
				TweenService:Create(v, TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {TextTransparency = 0}):Play()
			elseif v:IsA("UIStroke") then
				TweenService:Create(v, TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {Transparency = 0}):Play()
			end
		end
		
		local PetModel = PetModels:FindFirstChild(hatchedPet[1]):Clone()
		PetModel.Parent = workspace
		PetModel.PrimaryPart.CastShadow = false
		PetModel.PrimaryPart.CanCollide = false
		PetModel.PrimaryPart.CanTouch = false
		
		PetModel.PrimaryPart.CFrame = Camera.CFrame * CFrame.new(0, 0, -8)
		
		task.spawn(function()
			TweenService:Create(PetModel.PrimaryPart, TweenInfo.new(1, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {CFrame = Camera.CFrame * CFrame.new(0, -0.75, -8) * CFrame.Angles(0, math.rad(180), 0)}):Play()
			task.wait(1)
			TweenService:Create(PetModel.PrimaryPart, TweenInfo.new(0.5, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {CFrame = Camera.CFrame * CFrame.new(0, 0, -8) * CFrame.Angles(0, math.rad(180), 0)}):Play()
			task.wait(0.5)
			TweenService:Create(PetModel.PrimaryPart, TweenInfo.new(0.5, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {CFrame = Camera.CFrame * CFrame.new(0, -0.75, -8) * CFrame.Angles(0, math.rad(180), 0)}):Play()
		end)
		
		task.wait(2)
		
		for _, v in pairs(Frame:GetDescendants()) do
			if v:IsA("TextLabel") then
				TweenService:Create(v, TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {TextTransparency = 1}):Play()
			elseif v:IsA("UIStroke") then
				TweenService:Create(v, TweenInfo.new(0.2, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {Transparency = 1}):Play()
			end
		end
		
		TweenService:Create(PetModel.PrimaryPart, TweenInfo.new(0.4, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {Size = Vector3.new(0, 0, 0)}):Play()
		
		task.wait(0.4)
		PetModel:Destroy()
		EggHatch.Enabled = false
		task.wait(0.2)
		Cleanup(EggModel, Blur)
	end

If you have any ideas as to how I can solve this issue then feel free to let me know.

[DonKingFrog (Don)]

Well the only actual way other than viewports, is to physically spawn it on the client and force the camera close to it just like a viewport.

Quick Example

---

local Camera = workspace.CurrentCamera
local Egg = nil -- Replace with the egg
local Position = Vector3(X, Y, Z) -- Replace with X, Y, Z

Camera.CFrame = CFrame.new(Position, Egg.PrimaryPart.Position) -- Positions the camera
Egg:PivotTo(CFrame.new(Position, Orientation) -- Positions the egg

[Aceleith]

I’ve got that part to work, but I’m having trouble making the egg tween from side to side. Since I’m constantly updating the CFrame I can’t tween the rotation, how can I fix this?

[DonKingFrog (Don)]

A possible solution is just to attach the egg to a small part and connect it using motor6D, therefore you can animate the whole egg in any direction.

Which is a much simpler way to go with this.

Additional methods would probably include the use of BodyVelocity and CFrame with additional parts per axis. (e.g. Weld to a part which you move left to right, and rotate the egg itself as it does so.

[Aceleith]

I haven’t heard of Motor6D before, but I will look into it. Thanks for the assistance

[Aceleith]

I can’t seem to get it working, could you provide me with a guide?

[DonKingFrog (Don)]

Which method are you going to use? Animating or other methods?

[Aceleith]

The animation method sounded interesting

[DonKingFrog (Don)]

Basically, you’ll need a invisible part, as your root part.
Group the egg and the root part together and apply the Motor6D to both.
Then use any animator to animate the model (Might require some bonus stuff, not 100% sure)

[Aceleith]

I have this so far, what is the next step?

Center is the invisible part and Main is the egg.

[DonKingFrog (Don)]

Select Hell Egg and open an animator. Animate it, export the animation, and save it somewhere within the script.

Position the egg in front of the player’s camera, and play the animation. Once done, you can then show what pet they got and hide the egg.