After Effects integration
After Effects is Adobe’s motion design tool. It doesn’t publish to the web by itself, so we export each animation in the format the site can play best: Lottie through the LottieFiles plugin or Bodymovin for vector motion, or H.264 video from the Render Queue for footage, 3D and effects. Then we place it with Framer’s and Webflow’s own elements, or the dotLottie players and a plain video tag on Astro and Next.js.
| Complexity | Medium |
|---|---|
| Method |
|
| Typical setup | Half a day to 2 days per animation |
| What we do | We animate in After Effects, pick Lottie or video per animation, export it and lazy-load it on the page. |
| Category | Animation |
Setup by platform
How we set up After Effects
Framer
- Native
Lottie exports go in through the LottieFiles plugin for Framer, which supports Lottie and dotLottie with themes. Video renders go in Framer’s Video component, which takes uploads or hosted MP4 files. Framer doesn’t compress video, so we upload web-sized files.
Framer developmentWebflow
- Native
Webflow’s Lottie element plays Lottie JSON and dotLottie files from the Assets panel. Silent loops go in the Background video element, which takes files under 30MB and transcodes them to MP4 and WebM.
Webflow developmentAstro
- API
Lottie files play through @lottiefiles/dotlottie-web in a small client script that starts near the viewport. Video renders use a plain video tag with a poster frame, muted and playsinline for loops, served from a CDN or storage bucket.
Astro developmentNext.js
- API
@lottiefiles/dotlottie-react plays both .lottie and .json exports in a client component. Longer pieces stay video: a video tag with a poster and preload="none", so the file only loads when it is needed.
Next.js development
Use cases
What teams use it for
Icons and explainers as Lottie
Shape-layer animations, like feature icons, loaders and how-it-works steps, exported as small vector files that stay sharp at any size.
Hero loops as video
Brand loops with footage, 3D, glows or particles, rendered to MP4 and played muted behind or beside the hero.
Launch films and product demos
A short film on a landing page or case study, rendered from After Effects and hosted as a lazy-loaded video.
Before you add it
What to watch out for
Limits
Not everything exports to Lottie
Expressions have to be baked to keyframes, and procedural effects like particles, camera and light layers don’t export. We check the comp against LottieFiles’ compatibility list before we animate, not after.
Performance
Video weight
Framer doesn’t optimise uploaded video and Webflow caps background video at 30MB. We encode web versions ourselves, set a poster frame and keep video off the critical path so it doesn’t hurt LCP.
Performance
Images inside a Lottie
Raster images and pasted Illustrator art bloat a Lottie file. We convert artwork to shape layers and outline custom fonts or ship the font with the runtime.
FAQ
Questions about After Effects
Lottie or video?
Lottie for flat vector motion: icons, UI and illustration, where it stays sharp and small. Video for footage, 3D, glows and anything Lottie can’t export.
We decide per animation, so one page can use both.
Bodymovin or the LottieFiles plugin?
Both export Lottie from After Effects. Bodymovin renders Lottie JSON. The LottieFiles plugin exports .lottie or .json from its Export tab and can upload to a LottieFiles workspace, which needs a sign-in. We default to the LottieFiles plugin for .lottie files.
Can After Effects animations go into Rive?
Only through Lottie. Rive imports .lottie files on Enterprise plans and treats the import as a starting point: unsupported parts need rebuilding. For interactive work we usually build the animation in Rive from the start.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call