Rotate/Tween Frame around it's bottom right corner

Help and Feedback Scripting Support
, ,
#1

I want to achieve an animation effect when clearing out/deleting notes of a list, that kind of throws out the frames to the sides by rotating them on their bottom right corner, until they disappear into the right side of the screen.

However, I do not know how to pivot the frame around it’s bottom right corner, and I also need to use ClipDescendants for the parent of the rotating frame.

What I’ve tried:

local anchorRotate = {};
anchorRotate.__index = anchorRotate;

function anchorRotate.new(frame)
	local self = setmetatable({}, anchorRotate);

	self.frame = frame;
	self.absPosition = frame.AbsolutePosition;

	return self;
end

function anchorRotate:Rotate(theta)
	local size = self.frame.AbsoluteSize;
	local topLeftCorner = self.absPosition - size*self.frame.AnchorPoint

	local offset = size*self.frame.AnchorPoint;
	local center = topLeftCorner + size/2
	local nonRotatedAnchor = topLeftCorner + offset;

	local cos, sin = math.cos(theta), math.sin(theta);
	local v = nonRotatedAnchor - center;
	local rv = Vector2.new(v.x*cos - v.y*sin, v.x*sin + v.y*cos);

	local rotatedAnchor = center + rv;
	local difference = nonRotatedAnchor - rotatedAnchor;

	self.frame.Position = UDim2.new(0, nonRotatedAnchor.x + difference.x + offset.x, 0, nonRotatedAnchor.y + difference.y + offset.y);
	self.frame.Rotation = math.deg(theta);
end

local currentPage = self["pages"][cc:GetAttribute("PageIndex")-1]
		if currentPage then

			local frameRotation = anchorRotate.new(currentPage);
			local rotation = 0;

			repeat
				game:GetService("RunService").RenderStepped:Wait()
				rotation = rotation + 1;
				frameRotation:Rotate(math.rad(rotation));
			until rotation == 160
		end

How it should roughly look:

Frame 1
immagine

Frame …
(ClipDescendants doesn’t work for Rotated GUI Objects, I might have to use Canvas Groups?)
immagine

End Frame

immagine

#2

Hi!

Before proceeding. Is the anchorpoint of the Frame you want to tween in the bottom right corner?

When you rotate a frame, ClipDescendant will not function correctly. :slight_smile:

#3

Unfortunately, I know of the ClipDescendant issue.
I have the Anchor Point set to 1,1
and 1,1 for the position scale too, it should be the bottom right corner

I want to rotate the frame around the bottom right corner and make it disappear to the side, kinda like some notes/to-do apps

#4

Hi!

You should make a ParentFrame to be the rotation-anchorpoint. Then you just rotate the ParentFrame and the “PageFrame” will keep it’s position compared to the ParentFrame.
image
image

#5

Thank you, that should make it work, is there anything I can do to get around the current ClipDescendants limitations?

#6

Not what I know of no. It’s been a problem for years.

1 Like
#7

The Pivot I use in the bottom right corner has a scale of 0,0
It makes rotation possible, but also doesn’t let me scale the frame inside the pivot correctly and forces me to use offset, is there a way to use Scale?
immagine

#8

You could perhabs use AbsoluteSize, and then resize it in % of that AbsoluteSize, since every screen is different.

Edit: You could also let the PivotFrame be UDIM.new(1,0,1,) in size (fill out the whole screen). What you just gonna be aware of, is that you should have the middle of the PivotFrame to be at desired RotationPoint.

It does not matter how big or small you make the PivotFrame, since it will only be used for scripting, and not any click-detection. So if making the size be the size of the screen fits your scripting case, then go ahead and do so! :slight_smile:

1 Like