# Motion graphics templates: moving designs without After Effects [Canonical HTML page](https://gradiently.design/guide/motion-graphics-templates) Most brands need moving designs every week and a motion designer never. Here is what motion graphics templates are, which kind suits you, and how to make one look like yours rather than everyone's. ## The short version - Motion graphics templates are pre-animated designs where you change the words, colours and media while the movement stays done for you. - Templates for After Effects and Premiere Pro need that software, while browser based design tools offer animated templates you edit like a normal design. - A good motion template has few moving parts, editable text, sizes for each platform and a loop that joins cleanly. - Templates look generic when the colours, type and background stay as they came, so replace all three before posting. - Short loops of 5 to 15 seconds suit most animated social posts and stories. **Motion graphics templates** are designs that are already animated: you change the words, colours, photos or logo, and the movement is done for you. They exist for professional video software such as After Effects and Premiere Pro, but you don't need either. Browser based design tools offer animated templates you edit like any other design, then export as video or GIF. The trick is choosing templates with simple, calm motion and replacing enough of them that the result looks like your brand. ## The kinds of motion graphics templates "Motion template" covers very different files. Which one you want depends on the software you already use and how much control you need. | Kind | Works in | Good for | Learning curve | | --- | --- | --- | --- | | After Effects project | Adobe After Effects | Complex titles, logo reveals, full control | Steep | | MOGRT (.mogrt) | Premiere Pro, with controls set up in After Effects | Lower thirds and titles inside video edits | Moderate | | Apple Motion template | Final Cut Pro and Motion | Titles and transitions for Mac editors | Moderate | | Lottie animation (JSON) | Websites and apps, via a player | Small interface animations and icons | Developer needed | | Animated design template | Browser design tools | Social posts, stories, ads, signage loops | Gentle | If you're making posts, stories and simple ads, an animated design template in the browser is usually all you need. ## Motion graphics without After Effects After Effects is built for keyframes, expressions and compositing, which is far more than an animated sale post needs. For most social and marketing work, three kinds of movement do all the work, and good browser tools offer all three without a single keyframe. - **Background motion.** The colour field drifts, flows or breathes slowly behind still words. Calm, premium and easy to loop. - **Text entrances.** Words rise into place, pop, wipe in or type out letter by letter, then hold still long enough to read. - **Page sequences.** Several frames play in turn with a transition between them, like a moving carousel. The rule that keeps all three looking professional: move one thing at a time, and let the words settle before anything else happens. [Motion design principles](https://gradiently.design/guide/motion-design-principles) and [easing](https://gradiently.design/guide/easing) explain why calm movement reads as quality. ## What makes a good animated template ### Skip it - Everything moves at once - Text animates out before you can read it - Fixed to one size - A jump where the loop restarts - Effects that only work with the demo photo ### Choose it - One or two moving parts, the rest still - Words arrive, then hold for two seconds or more - Story, post and square versions - A loop that joins without a visible seam - Looks good with your words, not just the sample Test a template with your real, longest headline before you commit. Many templates look lovely with a three word sample line and fall apart with yours. ## Templates worth keeping ready A small set of animated templates covers most of what a business posts. Make each one once in your brand, save it, and every future version is a two minute edit. A vertical animated countdown story reading 3 days to go for a spring market, on a moving gradient A countdown story: the number changes each day, the background and layout never do. A portrait feed post reading Summer sale, this weekend only, with the gradient background drifting slowly A sale post where the words rise in over a drifting background, then hold. - **Announcement:** new product, new hours, new hire. See [announcement post](https://gradiently.design/guide/announcement-post-design). - **Countdown:** launches, events, deadlines. See [countdown post](https://gradiently.design/guide/countdown-post-design). - **Quote or testimonial:** a customer's words, typed out line by line. - **Sale or offer:** the headline and dates, nothing else. - **Tip or how to:** a short page sequence, one step per page. - **Event:** date, place, one line of why. ## How to make a template look like your brand The fastest way to spot a template is that it still wears the template's colours. Replace these, in this order, and it becomes yours. 1. **Swap the background** The background fills most of the frame, so it does most of the brand work. Use your own colour field or gradient, not the template's. 2. **Swap the type** Set headlines in your brand's heading font and the small text in its body font. 3. **Cut what you don't need** Delete decorative shapes, stickers and extra text boxes. Fewer elements, moving less, look more expensive. 4. **Slow the motion down** If the template offers a pace, choose the slower one. Fast loops feel cheap on repeat. 5. **Make every size from one design** Build the story, feed and square versions from the same file so they stay identical in look. - Rose for a launch: `radial-gradient(circle at 20% 20%, #fb7185 0%, #be123c 40%, #2a0612 85%)` - Deep sea for tech: `linear-gradient(200deg, #0f172a 0%, #0e7490 60%, #67e8f9 100%)` - Warm cream for food: `radial-gradient(circle at 75% 75%, #fcd34d 0%, #fef3c7 45%, #fffbeb 90%)` Three starting grounds. Whichever you choose, use the same one across every template so the set reads as one brand. ## Exporting animated templates Export MP4 for Instagram, TikTok, LinkedIn and anywhere that plays video; use GIF only where video won't play, such as some email clients. Keep loops between 5 and 15 seconds for posts and stories, and check that the last frame flows back into the first. [GIF vs MP4](https://gradiently.design/guide/gif-vs-mp4) explains the trade offs, and [animated Instagram posts](https://gradiently.design/guide/animated-social-posts) covers posting. ## Animated templates in Gradiently Gradiently's templates (posts, stories, posters, menus, cards and wallpapers) take your Mark as their background, so the moving part is a living gradient or material that is yours alone once claimed, and nobody else's template looks the same. Words can rise, pop, wipe or type in, the Mark can drift, flow, breathe or swirl, and with Pro you export seamless loops from 5 to 30 seconds as MP4, WebM or GIF, with every size made from one design. The full template library is part of Pro. ## FAQ ### What are motion graphics templates? Pre-animated designs where you change the words, colours and media while the animation is already built. They come for After Effects, Premiere Pro, Final Cut Pro and browser design tools. ### Can I make motion graphics without After Effects? Yes. Browser based design tools offer animated templates with background motion, text entrances and page transitions, exported as MP4 or GIF, with no keyframes to learn. ### What is a MOGRT file? A Motion Graphics Template file for Adobe Premiere Pro. It is usually built in After Effects and exposes simple controls, such as text and colour, for editing inside Premiere. ### How long should an animated social post be? Five to fifteen seconds suits most posts and stories. Let the words hold still for at least two seconds so people can read them. ### How do I stop a motion template looking generic? Replace its background, fonts and colours with your own, delete decorative extras and slow the motion down.