How to Animate with Keyframes from Vector Logo

How to Animate with Keyframes from Vector Logo

## Step 1: Create Project from SVG 1. Go to [app.aninix.com](https://app.aninix.com) and click on `Create project` 2. Choose `From .svg` option to import your SVG file ![Import SVG](https://aninix-inc.github.io/blog-images/import_svg.png) 3. Select your SVG file from your computer and upload it 4. Aninix will automatically process your SVG and create a new project with your design ready for animation ## Step 2: Create Keyframe Animation 1. Create your first position keyframe at the current time ![First Keyframe Header Position at Current Time](https://aninix-inc.github.io/blog-images/first_keyframe_header_position_at_current_time.png) 2. Create a second keyframe for the header position ![Second Keyframe Header Position](https://aninix-inc.github.io/blog-images/second_keyframe_header_position.png) 3. Change the value for your first header position keyframe ![Change First Header Position Keyframe](https://aninix-inc.github.io/blog-images/change_first_header_position_keyframe.png) 4. See your position animation in action ![Example Position Animation](https://aninix-inc.github.io/blog-images/example_position_animation.gif) 5. Change keyframe values for multiple selected items at once ![Change First Keyframes for Multiple Items](https://aninix-inc.github.io/blog-images/change_first_keyframes_for_multiple_items.png) 6. Adjust the offset value for multiple animation segments ![Change Offset for Multiple Animation Segments](https://aninix-inc.github.io/blog-images/change_offset_for_multiple_animation_segments.png) 7. Set the anchor point to middle for better button control ![Button Change Anchor Point](https://aninix-inc.github.io/blog-images/button_change_anchor_point.png) 8. Create scale keyframes for button size animations ![Button Create Scale Keyframes](https://aninix-inc.github.io/blog-images/button_create_scale_keyframes.png) 9. Modify the first keyframe value for the button animation ![Button Change First Keyframe](https://aninix-inc.github.io/blog-images/button_change_first_keyframe.png) 10. View your completed keyframe animation ![Example Keyframe Animation](https://aninix-inc.github.io/blog-images/example_keyframe_animation.gif) ## Step 3: Export File Format 1. Click the `Export` button in the top toolbar ![Export Button](https://aninix-inc.github.io/blog-images/export_button.png) 2. In the export options dialog, click on the format dropdown menu ![Export Options](https://aninix-inc.github.io/blog-images/export_options.png) 3. Choose Lottie for websites or GIF for email signatures ![Export Selected GIF](https://aninix-inc.github.io/blog-images/export_selected_gif.png) 4. Configure quality settings for optimal file size 5. Click `Save` to export your animation ![Export Success](https://aninix-inc.github.io/blog-images/export_success.png) Keywords: `vector logo animation`, `logo animation`, `brand animation`, `SVG logo`, `animated logo`, `vector graphics`, `keyframe logo`, `professional animation`