Most motion graphics trend lists are opinions with a stock photo on top. This one grades six trends by what can be checked: a release note, a browser compatibility table, a crawl of the open web. Everything below was verified on October 16, 2026, and anything likely to change carries a date.
The short version:
- Kinetic typography is backed. After Effects 26.0 animates up to eight variable font axes on a single text layer.
- Mixed 2D and 3D is backed by tooling, not by audience data. The software merged first.
- Tactile texture is a taste. Tools exist for it, and I found no published measurement of whether viewers respond to it.
- Scroll-driven storytelling is backed, and Firefox is the last holdout for roughly another week.
- Real-time rendering is backed in engines and in browsers, and thin for ordinary brand sites.
- Performance is the trend nobody lists. It decides whether the other five ship.
Scroll storytelling and tactile texture, running
The demo above scrolls its own story. Four panels, each with a paper-grain layer underneath and a heading that rises as the panel enters the frame. Two trends in one stylesheet, and only one of them moves. That split is deliberate.
Scroll-driven storytelling is the trend with the cleanest evidence. MDN's browser compatibility data for animation-timeline lists Chrome 115, Safari 26 and Firefox 159. I read that file on October 16, 2026. Mozilla's version feed that same day listed Firefox 158 as the stable release and 159.0b3 as the current beta, with the next release scheduled for October 23. WebKit announced the feature on June 20, 2025, in its guide to scroll-driven animations in Safari 26 beta. MDN still says the property isn't Baseline, because Firefox hasn't shipped it.
The CSS, in order
Everything in the demo is editable, and this is the same code.
:root { --grain: 0.35; }
.panel { position: relative; min-height: 190px; padding: 26px 24px; background: #ece4d4; }
.panel > * { position: relative; }
.panel::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
opacity: var(--grain);
mix-blend-mode: multiply;
pointer-events: none;
}
@keyframes rise {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.panel h3 {
animation: rise linear both;
animation-timeline: view();
animation-range: entry 0% entry 70%;
}
}
}The grain is an SVG feTurbulence tile with a single opacity variable, so it's static and costs nothing per frame to move. The heading does the moving. Order matters: animation-timeline comes after the animation shorthand, because the shorthand resets it. WebKit's guide states the same ordering requirement. The full pacing story is in the scroll-driven animation timing patterns post.
Chrome's documentation gives the performance argument for all of this: browsers deliver scroll events asynchronously, main-thread animations are subject to jank, and scroll-driven animations can run off the main thread. Use that advantage. Animate transform and opacity and leave layout alone.
What the grain costs
Honestly? I don't know. I found no published measurement of what a full-bleed blended noise layer costs on a mid-range phone, so treat it as paint cost until a profile in your own browser says otherwise. The restraint in the demo, one static layer and no animated filter, is a precaution, not a benchmark result. Dragging --grain to 0.9 shows the other cost, which is legibility. The type disappears first.
How trend lists get written
I read two popular lists in full to see what "trend" means in practice.
Videobolt published seven trends on December 11, 2025: hand-drawn visuals, analog textures, torn paper, modular layouts, hybrid 2D and 3D, dispersions and glass shapes, and AI-assisted animation. None of the claims cites an outside source. The only figure in the post is the company's own template count, 21,100 and up.
Designity's list, dated June 30, 2026, names ten trends and backs them with statistics. Most of those statistics are market sizes: a global animation market of about USD 462.32 billion in 2025, and a generative AI animation market projected at USD 23.6 billion by 2032. Market size tells you how much money moves around animation. It can't tell you whether a title card needs grain.
Neither list is dishonest. Both are the wrong kind of evidence for the question a working designer asks, which is whether to spend a week on this. So the grading here uses three tiers:
- Shipped and dated. Release notes, compatibility tables, specifications. These carry the argument.
- Reported. Trade press with a named author and a date, such as CG Channel. Good for what happened, weaker on why.
- Asserted. Agency and vendor opinion with no source. Useful for naming a claim, never for proving one.
Kinetic typography moved into the timeline
The strongest dated fact is Adobe's. After Effects 26.0 shipped on January 21, 2026, and CG Channel's coverage reports that every variable font axis can be animated, up to eight axes per layer, through the text animation system. Axes such as weight and width are now keyframe targets instead of a fixed choice made in the font menu.
That's a real change in what a title card can do. A word can thicken as it lands, then relax. One file, one family, no swapping between a Bold and a Regular cut.
The web side of the story is quieter. The kinetic typography for the web guide covers the CSS techniques and the 40ms per-character stagger ceiling that keeps text readable, and variable fonts for UI covers the axes themselves. On the library side, the npm README for GSAP says the formerly paid bonus plugins, SplitText among them, are free, and version 3.15.0 was published on April 13, 2026. That removes the licensing excuse for character-level splitting. It doesn't remove the reading-speed argument for restraint.
Here's my opinion, and you can disagree: kinetic type belongs on one headline per page. Past that, you're asking readers to wait for words, and I found no trend list that cites a study showing they like it.
Tactile texture has the tools and none of the data
Tactile texture, for what it's worth, has the best tooling story of the six and the weakest data. Blender 5.2's compositor gained a Film Grain asset that simulates analog film noise, and After Effects 26.0 reads Substance materials, so a texture library is now one import away. Whether audiences notice is a separate question the sources don't answer. How these effects fit into a delivery pipeline is covered in the motion graphics production workflow, and handing them between people in remote motion design collaboration.
Mixed 2D and 3D: the tools merged first
Hybrid 2D and 3D shows up on every list. The evidence is in the software, not in viewer research.
After Effects 26.0 added a mesh drawing tool that creates cubes, spheres, cylinders, cones, tori and planes, with roughness, metalness and emissivity as basic material properties. It also imports Substance 3D .sbsar materials and lets Spot and Parallel lights cast shadows under the Advanced 3D render engine. A motion designer who works in flat layers can now drop a lit, textured sphere into a comp without leaving the app.
Blender went the other direction. Blender 5.0 shipped on November 18, 2025, and 5.2 LTS followed on July 14, 2026. The project's release notes say LTS versions are maintained for two years. Cavalry, a 2D-first tool with 3D-style workflows such as rigging and instancing, changed hands: CG Channel reported on February 25, 2026 that Canva had acquired it. Pro costs GBP 192 a year, rental-only, per CG Channel. Canva said what's free in Cavalry today will stay free, and hasn't said whether paid pricing will change. The Rive vs Cavalry comparison covers which one fits UI work.
So is hybrid 2D and 3D a trend? As a toolchain, yes, and the dates prove it. As an audience preference, I found no published data either way. If a brief asks for it, the honest justification is "the tools make it cheap now", not "viewers want it".
Real-time rendering, in engines and in browsers
Real-time is where the evidence splits in two.
In engines, CG Channel's November 12, 2025 write-up reports Unreal Engine 5.7 with the Motion Design tools first seen in 5.4 now production-ready, and rich text support in Text3D. CG Channel's June 17, 2026 piece on Unreal Engine 5.8 reports MegaLights, introduced in 5.5, as production-ready, and the motion design tools gaining performance and workflow improvements, including combined masks. Blender 5.2 made its interactive compositor more responsive and able to play back animation.
In browsers, WebGPU is the number to watch. MDN's compatibility data lists it in Chrome since version 113 on ChromeOS, macOS and Windows (Linux with Intel Gen12+ GPUs joined in 144), in Safari since 26, and in Firefox since 141 on Windows, with Apple silicon Macs following in Firefox 145 and 147. Firefox doesn't support it on Linux or Intel Macs. The npm registry showed three.js 0.186.1, published September 24, 2026, as the latest release on October 16.
Two named sites show what this looks like when it works. The Awwwards project pages list the scores.
- Messenger by abeto won Site of the Day on November 10, 2025. It's built with Three.js, WebGL and WebSockets. Its Developer Award score is 8.21, with Animations and Transitions highest at 9.00.
- Lando Norris by OFF+BRAND won Site of the Day on November 17, 2025, built with WebGL, GSAP and Webflow. Its Developer Award score is 7.58, with Animations and Transitions at 8.60.
Both are excellent work. They're also the high end of the genre, built by studios whose whole business is interactive 3D. The sample says little about what a ten-page brand site gains from a real-time scene.
The performance bill
Here's the other half of those two score pages. On Messenger, the Developer Award accessibility sub-score is 7.60, tied with Semantics and SEO and with Markup for lowest of six, while its WPO (performance) score is a healthy 8.80. On the Lando Norris site accessibility is 7.00, the single lowest of six, against 8.60 for animation, and WPO is 7.60. Two data points aren't a study, and the performance side is mixed. What they do show is that a high animation score and a low accessibility score can sit on the same page.
For the wider web there is a larger source. The 2025 HTTP Archive Web Almanac performance chapter, based on July 2025 data, reports that non-composited animations appear on 40% of mobile pages and 44% of desktop pages. Median mobile Total Blocking Time rose to 1,916 ms from 1,209 ms in 2024, which the authors read as heavier JavaScript execution overall. Meanwhile 77% of mobile sites had good Interaction to Next Paint, up from 74%, and 62% had good Largest Contentful Paint. INP counts as good at 200 ms or less at the 75th percentile, per web.dev.
Read those together. Responsiveness improved while main-thread work grew. The web got better at hiding the cost, not at avoiding it.
Every motion trend of 2026 is one performance budget away from being a liability, and the web's main thread keeps getting busier.
That's the thesis behind this whole post, and the practical rules are short:
- Animate
transformandopacity. Leave layout properties alone. - Feature-detect with
@supports, so unsupported browsers get the finished state. - Wrap travel in
prefers-reduced-motion: no-preference. The reduce, don't remove patterns sort which effects stay. - Set a main-thread budget before adding a 3D scene. The post on blocking the main thread gives the arithmetic.
What is already aging
A trend report that doesn't say when it expires is a snapshot pretending to be a forecast. These are the claims above most likely to change, with the date each was checked.
| Claim | Checked | Likely to change because |
|---|---|---|
| Firefox is the holdout for scroll-driven CSS | Oct 16, 2026 | Firefox 159 stable is scheduled for Oct 23, 2026 |
| After Effects 26.0 variable font and 3D features, $34.49 a month for a single app | Jan 21, 2026 | Adobe can release new versions and change prices at any time |
| Cavalry pricing and Canva's plans for it | Feb 25, 2026 | Canva hasn't said whether paid pricing changes |
| MegaLights production-ready in Unreal 5.8 | Jun 17, 2026 | CG Channel's 5.7 and 5.8 write-ups are seven months apart, so 5.9 may follow |
| Blender 5.2 LTS as current, 5.3 in beta | Oct 16, 2026 | The release-notes page lists 5.3 beta and 5.4 alpha |
| three.js 0.186.1, GSAP 3.15.0 | Oct 16, 2026 | Both publish often |
| Web Almanac figures (July 2025 crawl) | Oct 16, 2026 | A newer chapter replaces them |
| Awwwards sub-scores | Oct 16, 2026 | The sample is two sites, and a project page can be updated |
| Videobolt and Designity trend lists | Dec 2025, Jun 2026 | Newer lists replace them |
The first row has the shortest fuse. By the time you read this, Firefox 159 may already be out, and the sentence calling Firefox the holdout will be wrong. That's the point of the table.
How this post is kept current
This is a researched compendium, not a field report. Nobody here shipped a campaign to produce it. The numbers come from the named sources, each linked in the citations, and where I couldn't find a measurement I said so.
The post gets a full re-check every quarter. The first pass is due in January 2027, starting with the Firefox row. The updatedDate in the page metadata moves only when a figure has been re-read at its source, so a new date means the sources were opened again. A claim that can no longer be verified comes out, rather than being quietly kept.
