Lottie Animation for Web & App

Pro

Petar Matić

Contact for pricing

About this service

Summary

A fully optimized Lottie JSON file with smooth performance on web and mobile, with additional source files (After Effects, Illustrator, Photoshop or Figma) available if needed. Preview files like MP4, GIF, or a LottieFiles link make reviewing easy and accessible.

Process

1. Discovery & Planning • Discuss project goals, animation style, and technical requirements. • Define key interactions (looping, hover effects, click triggers). • Review references or brand guidelines for consistency.
2. Concept & Storyboarding • Create initial sketches or motion drafts to outline animation flow. • Share a storyboard or rough animation preview for approval.
3. Design & Asset Preparation • Design vector assets in Illustrator, Figma or Photoshop, ensuring they are optimized for animation. • Structure layers properly in After Effects for smooth rigging and animation.
4. Animation & Refinement • Animate using After Effects with a focus on fluidity and responsiveness. • Optimize animation for Lottie, ensuring minimal file size without quality loss. • Share a preview (MP4/GIF) for feedback and make necessary revisions.
5. Export & Testing • Export the final Lottie JSON file using Bodymovin. • Test across different devices and platforms to ensure seamless performance. • Provide an interactive preview link (LottieFiles) if needed.
6. Delivery & Support • Deliver final JSON file, source files (optional), and preview files. • Offer post-delivery support for minor adjustments or troubleshooting.

FAQs

  • What format do you deliver the animation in?

    The main deliverable is a JSON file, optimized for Lottie playback. I also provide MP4/GIF previews for easy review and source files (After Effects, Illustrator, Photoshop or Figma) if needed.

  • Can the animation be interactive?

    Yes! Lottie allows interactivity based on scroll, hover, or click events. If you need interactive elements, let me know, and I’ll structure the animation accordingly.

  • How optimized is the JSON file?

    I ensure the file is lightweight and optimized, keeping the animation smooth without compromising quality. No unnecessary assets or unoptimized keyframes.

  • Can I edit the animation later?

    If you need to make changes, I can provide the After Effects project file (.aep), allowing you to edit the animation as needed.

  • Where can I use the Lottie animation?

    Lottie animations work on websites, mobile apps (iOS & Android), and React-based platforms.

  • What do you need from me to start?

    A short brief including: • Animation goals & expected interactions • Any brand assets (logos, colors, fonts) • References or inspiration (if available)

  • How long does it take to complete a Lottie animation?

    It depends on complexity, but typically 2–5 days for a short animation. More complex projects may take longer, but I’ll provide a timeline upfront.

  • Can you create a Lottie animation from my existing video or GIF?

    Yes! I can convert an animation into a Lottie-friendly format, but some adjustments may be needed to ensure smooth playback.

What's included

  • JSON File

    A fully optimized .json file exported via Bodymovin in After Effects, ensuring smooth performance across web and mobile platforms.

  • Source Files (Optional)

    • After Effects (.aep) project file for potential edits or future modifications. • Illustrator (.ai) or Photoshop (.psd) source files if vector assets were used in the animation. • SVG/PNG assets if external images are included in the animation.

  • Preview Files

    • MP4 or GIF preview for easy review without needing Lottie tools. • LottieFiles preview link (if applicable) for a quick and interactive preview.

Recommendations

(5.0)

Robert Lough • MHouse

Client • Mar 18, 2025

Recommended

Highly recommend. We came in with a very late brief in need of a fast turnaround, Petar was prompt, professional and delivered a fantastic final output.

Kyle Hudson • Stacks, Inc

Client • Jan 27, 2025

Recommended

Petar is awesome! So easy to work with, professional, great communication, and we can't wait to start our next project with him.

Recommended

Working with Petar is great! Developed us some great animations and we'll definitely work with him in the future.


Client • Feb 19, 2025

Recommended

Petar is awesome! We love working with him, this was our second project collaborating. We'll be excited to partner up again with him.


Client • Mar 17, 2025

Jeff Visoky • A Unified Whole

Client • Mar 15, 2025

Recommended

Jeff at A Unified Whole hired Petar and recommends working with them

Nimayi Dixit • Tusk & Quill

Client • Feb 14, 2025

Recommended

Petar was all-around excellent to work with. We worked on a reel creation project of moderate complexity. Petar is talented and easy to work with. He was prepared with ideas at our first meeting and highly responsive to feedback.

Star Castillo • Tom Allen

Client • Feb 7, 2025

Recommended

It was great working with Petar! The final result for our videos were amazing and he was very responsive. Also very quick turn around time

Molham Bakir • Molham.Works

Client • Jan 7, 2025

Recommended

Faster and responsive to requests and super creative. Thanks Petar!

Pasquale Vitiello

Client • Nov 11, 2024

Recommended

Pasquale recommends working with Petar

Thomas Kendlinger • ultraperfekt

Client • Oct 14, 2024

Recommended

It was a real pleasure working with Petar. He directly understood the direction we wanted to go and delivered a motion template not only easy to use, but also matching our own branding. It was exactly what we were looking for.

Recommended

Working with Petar has been an absolute pleasure. As a young designer, he brings an exceptional level of creativity and innovation to every project. Petar is extremely reliable and consistently meets deadlines, often completing tasks ahead of schedule. His work is exemplary, showcasing both his technical skills and artistic flair. Having collaborated with him for some time now, I am thoroughly impressed and satisfied with the services he provides. I look forward to working together in the future

Skills and tools

Graphic Designer

2D Animator

Adobe After Effects

Adobe Illustrator

Figma

More services

Motion Design

Example projects

Contact for pricing

Video Editing

Example projects

STARTING AT

$25/hour

hourly rate

3D Product Visualization

Example projects

Contact for pricing