In the attached file, there is a gui with two ViewportFrames. The left one is inside of a CanvasGroup.
Both contain a character that plays an animation.
When running the game only the ViewportFrame outside of the CanvasGroup is rendering each frame of the animation, while the CanvasGroup ViewportFrame only renders when other elements are changed.
Expected Behavior
I expect both viewport frames to show an animating character.
Actual Behavior
Only the ViewportFrame outside of the CanvasGroup is rendering each frame of the animation.
If you hover over a button (or trigger any UI change inside of the CanvasGroup, it will re-draw the viewport (showing the up-to-date animated character).
I’ve been experiencing the same thing with my ViewportFrames, I didn’t realize it was due to being inside a CanvasGroup. Thanks for pointing this out, hope it can get fixed soon.
I almost went crazy trying to figure out why my ViewportFrames would not update/render anything inside of them.
Other examples of weird behavior includes the viewport updating its objects when you select/deselect the viewport instance itself in Roblox studios explorer, or if you hover over buttons, specifically if they have any special animations happening. The Viewport will also not show any new instances added. Very frustrating and discourages my use of CanvasGroups.
Any update on this? It is currently severely impacting my development for my game’s UI and is limiting some of its features.
I figured out a fix, yet it’s still annoying that this has to be done.
1. Create the UI and script.
2. Code your animation to play
3. Add a Frame (titled “Line”), with the size of {1,0}, {0, 0}
4. Add this code at the bottom of your script.
local TweenService = game:GetService("TweenService")
local Line = script.Parent.Line
-- I'm guessing your localscript is in the viewportframe.
local Info = TweenInfo.new(1, Enum.EasingStyle.Linear)
Line.Transparency = 0.9
while true do
local In = TweenService:Create(Line, Info, {Transparency = 1})
In:Play()
In.Completed:Wait()
local Out = TweenService:Create(Line, Info, {Transparency = 0.9})
Out:Play()
Out.Completed:Wait()
end
Although it’s not the smoothest and probably the least efficent, it does the job well.
Nope, the only hacky way to solve this issue is to update the transparency using a while loop or a renderstep loop. This approach updates the viewportframe’s render each time the transparency changes.
