Lottie Animation Set for Web
Budget: $30 – $250 USD
Objective
I need a talented motion graphics designer experienced with Lottie (Bodymovin + After Effects) to create a set of high-quality, web-optimized animations that will be integrated into my Next.js website (hosted on Vercel).
The animations should visualize a fire gradually burning down the CCP’s logo over time, with optional interactive variations.
________________________________________
Project Scope
1. Fire Animation (Base)
• Goal: A looping animation of realistic fire with a transparent background.
• Format: .json (Lottie via Bodymovin export).
• Duration: ~3–5 seconds per loop (seamless loop, no visible jump).
• Versions:
o fire_normal.json — base flame.
o fire_strong.json — stronger, more intense flame (used when triggered by JS).
• Style: Stylized or semi-realistic fire, suitable for overlay on a logo.
________________________________________
2. CCP Logo Burn Sequence
• Goal: 60 images showing the CCP logo progressively burning into ashes (1 frame per day over ~2 months).
• Format: .webp or .png with transparent or dark background.
• Requirements:
o Consistent framing and logo position across all images.
o Gradual burn — color darkening, charring, partial destruction, eventually turning into ash.
o Visually coherent when swapped daily on the website.
________________________________________
3. Wooden Stick Animation (Overlay)
• Goal: 10 short animations of a wooden stick being thrown into the fire, varying in size and thickness.
• Format: .json (Lottie, transparent background).
• Requirements:
o Duration 1–2 seconds each.
o Stick appears from random side (top/side) and falls into fire area.
o Designed to visually overlay on the existing flame animation.
________________________________________
Technical Requirements
• All animations must be exported via Bodymovin for Lottie (JSON format).
• Must loop seamlessly where applicable.
• Transparent backgrounds are required (no color key).
• Optimized for web performance (<1 MB per file ideally).
• Delivery ready for Next.js + React integration.
________________________________________
Optional (Nice to Have)
• Slight heat-wave distortion or glow overlay as a separate Lottie layer.
• Guidance on animation compression (Lottie optimization).
• Advice on color blending and export settings for seamless visual merging.
________________________________________
Deliverables
• /animations/fire_normal.json
• /animations/fire_strong.json
• /animations/sticks/stick_1.json → stick_10.json
• /logos/burn_0.webp → burn_59.webp
• Preview video showing how they layer together (MP4 or GIF).
• Source files: After Effects .aep + assets.
________________________________________
Skills Required
• Adobe After Effects
• Bodymovin (Lottie) export workflow
• Vector or stylized fire design
• Basic understanding of animation looping and layering
• Optional: familiarity with web animation tools (React Lottie Player, CSS blending)
I need a talented motion graphics designer experienced with Lottie (Bodymovin + After Effects) to create a set of high-quality, web-optimized animations that will be integrated into my Next.js website (hosted on Vercel).
The animations should visualize a fire gradually burning down the CCP’s logo over time, with optional interactive variations.
________________________________________
Project Scope
1. Fire Animation (Base)
• Goal: A looping animation of realistic fire with a transparent background.
• Format: .json (Lottie via Bodymovin export).
• Duration: ~3–5 seconds per loop (seamless loop, no visible jump).
• Versions:
o fire_normal.json — base flame.
o fire_strong.json — stronger, more intense flame (used when triggered by JS).
• Style: Stylized or semi-realistic fire, suitable for overlay on a logo.
________________________________________
2. CCP Logo Burn Sequence
• Goal: 60 images showing the CCP logo progressively burning into ashes (1 frame per day over ~2 months).
• Format: .webp or .png with transparent or dark background.
• Requirements:
o Consistent framing and logo position across all images.
o Gradual burn — color darkening, charring, partial destruction, eventually turning into ash.
o Visually coherent when swapped daily on the website.
________________________________________
3. Wooden Stick Animation (Overlay)
• Goal: 10 short animations of a wooden stick being thrown into the fire, varying in size and thickness.
• Format: .json (Lottie, transparent background).
• Requirements:
o Duration 1–2 seconds each.
o Stick appears from random side (top/side) and falls into fire area.
o Designed to visually overlay on the existing flame animation.
________________________________________
Technical Requirements
• All animations must be exported via Bodymovin for Lottie (JSON format).
• Must loop seamlessly where applicable.
• Transparent backgrounds are required (no color key).
• Optimized for web performance (<1 MB per file ideally).
• Delivery ready for Next.js + React integration.
________________________________________
Optional (Nice to Have)
• Slight heat-wave distortion or glow overlay as a separate Lottie layer.
• Guidance on animation compression (Lottie optimization).
• Advice on color blending and export settings for seamless visual merging.
________________________________________
Deliverables
• /animations/fire_normal.json
• /animations/fire_strong.json
• /animations/sticks/stick_1.json → stick_10.json
• /logos/burn_0.webp → burn_59.webp
• Preview video showing how they layer together (MP4 or GIF).
• Source files: After Effects .aep + assets.
________________________________________
Skills Required
• Adobe After Effects
• Bodymovin (Lottie) export workflow
• Vector or stylized fire design
• Basic understanding of animation looping and layering
• Optional: familiarity with web animation tools (React Lottie Player, CSS blending)