Animate with Hold Keyframes | SVGator
Welcome to our channel. These tutorials are for SVGator - the most advanced SVG animation creator: https://www.svgator.com
In this tutorial you can learn how to animate with Hold keyframes.
0:14 Applying stroke offset animator
0:46 Set Stroke Offset to start from the top
0:58 Convert keyframe into a hold keyframe
2:01 How to Add Keyframes Faster
2:30 Adding Rotate Animation to a Circle
In this guide, you'll learn how to animate a loader using hold keyframes for stroke offset animation, allowing a circle to complete its path in a few simple steps. By following these steps, you can create a smooth and professional-looking animation.
Set Initial Keyframes:
Place the playhead at the first second on the timeline.
Select "Stroke Offset" from the animator's list.
Go to the stroke properties and note the length of the circle. Copy this length for both the offset and dashes.
Move the playhead to the fifth second and set the offset back to zero.
Rotate the Circle:
To start the stroke offset animation from the top, rotate the circle 90° to the left.
Grab the circle from one of the corners and rotate it while holding down the Shift key for precise rotation.
Convert to Hold Keyframes:
Select the first keyframe.
To convert it into a hold keyframe, go to the easing panel and choose "Step End".
The line connecting the two keyframes will change to a dashed line, indicating that the smooth transition between the keyframes has been removed. The line will appear completed only when the playhead reaches the second keyframe.
Add Intermediate Steps:
To animate the line incrementally, place steps every half a second between the keyframes.
Add new keyframes at intervals of 0.5 seconds. For example, add the first one at 1.5 seconds, then another one at 2 seconds, and so on.
You can use the keys Alt+F (Windows) or Option+F (Mac) to add keyframes faster.
Apply Step End Function to All Keyframes:
Select the animator with all its keyframes.
Go back to the easing panel and choose the "Step End" function.
Play the animation to see the stroke offset filling in steps, creating an incremental and smooth animation.
Add Rotate Animation:
For an additional effect, add a rotate animation to the circle.
With the playhead at the first second, press Shift+R on the keyboard to add the rotate animator.
Drag the playhead to the fifth second and rotate the circle 180° clockwise, in the same direction as the stroke offset.
This will make the circle spin while animating the stroke offset.
Final Review:
Play through the entire animation to ensure everything is working as intended.
Adjust the keyframes and rotation if necessary to achieve the desired effect.
Subscribe: / @svgator
Let's connect:
Facebook: / svgator
Instagram: / svgatorapp
Twitter: / svgatorapp
LinkedIn: / svgator
SVGator is an online SVG (Scalable Vector Graphics) animation creator.