This tutorial is for syncing/animating properties of objects such as transparency, color, or CFrame to be in time with playing animation tracks. In simple terms, this is for ‘animating’ properties.
Because Roblox doesn’t support property changes via animation, I discovered this little workaround. I found this method out myself, however it may already be common knowledge to skilled or advanced animators. This method in my opinion is a lot easier and faster than manually timing it.
Step 1: Rig your desired object up to an animation editor.
In this case, I’m using Moon Animator. Add the desired object to the animation you want it to sync with. My desired object is Aftershadow. Keep in mind you have to have at least one animate-able object, so rigging via Motor6D is required. Because Aftershadow is an R6 rig, this is easy. Check out a rigging tutorial if you’re unfamiliar.
Step 2: Create keyframes where you want the property to be changed, and make one that aligns with the end of the animation.
As you can see, I’ve put empty or blank keyframes to points where I want the property changed. Do note that you should have a blank keyframe aligning with the final keyframe of animation. This is important for animations that loop. In this example, Transparency is our targeted property. It’s crucial for looping animations that you make a keyframe for the end of the track, otherwise, it will desync after a few loops.
Step 3: Export the animation and load it into Roblox’s Animation Editor.
If you were already using Roblox’s Animation Editor, ignore this step. Now that I’ve loaded Aftershadow’s animation into the Roblox Animation Editor, we can see that our keyframes are still here and in the exact same place in the timeline.
Step 4: Create Animation Events on the desired keyframes.
Create an Animation Event by right clicking the keyframe and selecting “Add Animation Event Here”. Make a memorable name for the event, in this case, FadeIn, as we’re working with Transparency.
I’ve made a second event called FadeOut, as the Transparency will be changed here too.
Step 5: Create a script to play the animation track and use GetMarkerReachedSignal() to listen for the Animation Events.
Here is my script example. You do not have to use tweens, but I am for aesthetic purposes. Now, when the animation plays, and we reach the point where we want our property to change, the script will change (in this case, tween) our property and align perfectly with the animation.
Final product:
As you can see, it lines up perfectly in time with the animation. Hope this helps you out!