After Effects
Motion can show how a product works in a few seconds. After Effects is where much of that motion is made, and there are two ways to get it onto a Framer or Webflow site.
What After Effects is
Adobe After Effects is a motion graphics and compositing app. Designers use it to animate interfaces, diagrams, logos and illustrations. Work made in After Effects reaches a website as a video file, or as a Lottie animation exported with a plugin such as Bodymovin or LottieFiles.
How it fits on your site
As video. The animation is rendered to MP4 or WebM and placed on the page. Video suits footage, 3D, heavy effects and longer sequences. Framer hosts uploaded video and embeds video from hosts such as YouTube or Vimeo. Webflow has a background video element for short loops, and longer video can come from a host such as Vimeo.
As Lottie. Vector animation is exported as a JSON or.lottie file. It stays sharp at any size and can play on load, on click or as it scrolls into view. Webflow supports Lottie natively through its interactions, and Framer plays Lottie files with a Lottie component.
As native animation. Fades, reveals, hover states and simple transitions are often better built directly in Framer or Webflow. They’re lighter, and your team can edit them without After Effects.
Where the scope includes motion, we decide with you which moments need After Effects and which can be built in the site itself.
What you get
A plan for each moment of motion: video, Lottie or native animation
Exported files sized and tested on desktop and mobile
Source files handed over with the site
What to watch out for
Not everything exports to Lottie
Some After Effects features don’t play back in Lottie, and support differs by platform. The LottieFiles plugin checks which features an animation uses and whether they’ll play, so animation meant for Lottie is planned for the format from the start.
File size
A complex Lottie file can weigh more than a short video. Check the exported size and test on a mid-range phone.
Reduced motion
Some visitors turn off animation in their system settings. Large or looping animations should respect that setting.
Editing later
Changing an exported animation means going back to the After Effects file. Keep the source with the site.
Questions about After Effects
Daniel G. Bright
Founder, BrightStudios
Still have a question?
Book a call with me to talk through your project and agree the next step.
Related
Figma
Where identities, websites and templates are designed first, then handed to your developers or built.
Framer
Marketing sites your team can edit visually, with a component system and a CMS. We’re an Official Framer Expert.
Webflow
Structured websites with a flexible CMS and reusable components for ongoing publishing.
Lottie
Light animation that plays on load, on click or as it scrolls into view.
Rive
Animation that responds to the visitor.
Tell us what your site connects to
Share your product and the tools your team uses. We’ll recommend a scope and the simplest way to connect each one.