What is multi-section editing in Draftly?

Multi-section editing lets you select multiple sections of a Draftly site simultaneously and apply a single AI prompt, style change, or content update across all of them at once. It replaces the slow one-section-at-a-time workflow with batch operations — useful for tone shifts, rebrands, localisations, and propagating design tokens across an entire page.

How are custom animations different from Draftly's default motion?

Default motion uses our pre-tuned scroll-driven curves applied globally. Custom animations let you override timing, easing, trigger point, and stagger per section. You can assign fast 280ms snap animations to interactive elements and slow 1200ms cinematic reveals to hero sections within the same page, matching your brand's pace.

Do custom animations slow down my site?

No, when used reasonably. Custom animations run on the compositor thread using transform and opacity only, which avoids layout thrashing. Lighthouse scores on test sites stayed within 2 points of default configuration. The engine also respects prefers-reduced-motion accessibility settings automatically, so users who opt out of motion still get a fast static experience.

Can I save animation presets and reuse them across projects?

Not yet at the project-library level — that's on the roadmap for next quarter. For now, you can save animation profiles within a single project and propagate them across pages using multi-section editing. Agencies managing client work should expect shared style libraries and brand-level animation presets in upcoming releases.

Are these features available on the free plan?

Custom animations are available on all paid plans. Multi-section editing is available in a preview state on the free tier — you can select up to three sections per project. Full multi-section editing with bulk AI prompting, unlimited selections, and cross-page propagation requires a paid subscription.

New in Draftly: Multi-Section Editing and Custom Animations

We just shipped two updates that fundamentally change how fast you can iterate on a site inside Draftly. Multi-section editing and custom animations now let you reshape several blocks at once and define motion that actually fits your brand — rather than relying on generic fades and slide-ins.

If you've ever finished an AI-generated site only to find yourself editing one section at a time for 40 minutes straight, or wishing the hero headline had a different reveal than the rest of the page, these releases are built for you. Internal data from our beta cohort showed users spent 47% less time on second-round revisions once these tools went live.

Here's what changed, why it matters, and how to use it well.

What Multi-Section Editing Actually Does

Until now, editing in Draftly worked the way most builders work: click one section, change it, save, scroll, click the next. That's fine for small tweaks. It's painful when you're rebranding, swapping a product line, or applying a single tone change across an entire long-scroll page.

!new in draftly multisection editing and custom animations, product

Multi-section editing introduces three new behaviours:

Select-and-batch: hold Shift and click any number of sections to group them into a single editing context.
Bulk prompt editing: send one AI instruction ("rewrite all selected sections in a more formal B2B tone" or "replace every mention of 'consultant' with 'advisor'") that applies across the batch.
Style propagation: change a heading font, button radius, or color token on one selected section and push the same change to every other selected block in a click.

In practical terms, a five-section About page that previously took 12–15 minutes to rewrite end-to-end now takes closer to two minutes. We tested this against 60 real edit sessions and saw a median time-saving of 78%.

When to use multi-section editing

Not every change is a batch change. Use it when:

You're applying a tone shift across multiple sections (e.g., from casual to enterprise voice).
You're doing a brand refresh — new colors, typography, or button styles need to land everywhere.
You're localising a site — translating headlines and CTAs across all sections in one pass.
You're running an A/B variant where the entire upper fold needs to change for a new audience.
You're swapping product or service names site-wide after a positioning change.

For surgical edits — fixing one stat, tweaking one image — single-section editing is still faster. Use the right tool for the job.

Custom Animations: Motion That Matches Your Brand

The second release is bigger in scope. Draftly has always shipped with cinematic scroll-driven motion baked in, but until now those animations followed our default curves and timings. If you're a luxury brand, you probably wanted slower easing. If you're a fintech, you probably wanted snappier, more confident transitions. Now you can define both.

Custom animations let you control four dimensions per section:

Trigger: when motion starts — on scroll enter, on viewport center, on click, or on a specific scroll percentage.
Easing curve: choose from 12 presets (ease-out-quint, anticipate, spring-soft, linear, etc.) or paste your own cubic-bezier values.
Duration: from 150ms (snappy UI feedback) to 2400ms (cinematic reveals).
Stagger: control the delay between child elements within a section — useful for animating list items, card grids, or testimonial walls sequentially.

This is the layer most AI builders never expose. For deeper context on how scroll-based motion affects engagement, our design guide on page transitions and section animations walks through the principles. The new custom animations panel is essentially that guide turned into a control surface.

Why custom timing matters more than you think

Research from the Nielsen Norman Group puts the sweet spot for UI animation between 200–500ms — fast enough to feel responsive, slow enough to be perceived. But brand-narrative animations (hero reveals, story sections) often work better at 800–1400ms because they signal intentionality. A luxury watch site at 200ms feels cheap. A SaaS dashboard demo at 1400ms feels sluggish.

This is why a single global animation setting was never enough. Custom animations let you assign fast, functional motion to interactive elements and slow, cinematic motion to brand-storytelling sections — within the same page.

We also studied 240 sites built on Draftly's beta and found that pages with thoughtfully tuned animation timings had:

31% higher average scroll depth
22% longer median time on page
14% better CTA click-through compared to default-timing equivalents

Motion is a conversion lever. Not in a manipulative way — in the sense that it cues attention, reinforces hierarchy, and rewards the eye for staying on the page.

How to Use Both Features Together

The two releases compound. Here's the workflow we've watched expert users adopt within the first two weeks of access:

Generate the site from a single prompt as usual.
Audit the scroll experience end-to-end on desktop and mobile. Note which sections feel rushed and which feel sluggish.
Group sections by role: hero/story, product/feature, social proof, conversion. Each role gets its own animation profile.
Use multi-section editing to select all sections within a role and apply a shared animation profile in one move.
Test on a real device, not just the preview pane — mobile motion perception is different from desktop.
Re-prompt copy in batches once visual rhythm is locked, since pacing affects how much text feels right per section.

For teams building many sites, this workflow stacks beautifully with Draftly's multi-page site structure — you can define an animation profile on a homepage and propagate it across product, about, and pricing pages in seconds.

A quick example: rebranding a 14-section homepage

A Mumbai-based D2C beauty brand in our beta used both features last week to migrate from a launch site to a Series A site. The old version had playful, bouncy animations and copy that read "hey there!" everywhere. The new positioning needed to feel premium and confident.

Within 18 minutes they:

Selected all 14 sections.
Sent one bulk prompt: "rewrite all copy in a confident, understated voice appropriate for a Series A skincare brand."
Applied a custom easing curve (ease-out-expo, 900ms) to all narrative sections and a snappier curve (ease-out-quad, 280ms) to interactive elements.
Pushed live.

The same change through a traditional design agency would have cost ~₹85,000 and taken two weeks. This is the gap AI website builders are closing against traditional web agencies, and these two features sharpen that edge considerably.

Performance Considerations

A fair question: does richer motion hurt page speed? It can, if used carelessly. We built both features with performance budgets in mind.

Custom animations run on the compositor thread (transform + opacity only) — no layout thrash.
The animation engine respects the user's `prefers-reduced-motion` system setting automatically.
Stagger delays cap at 2000ms total per section to prevent perceived lag on first paint.
Lighthouse scores on test sites with full custom animations enabled stayed within 2 points of the default configuration.

If you're particularly speed-sensitive — say, you're running paid ads to landing pages where every 100ms matters — pair this with the techniques in our site speed optimisation guide to maintain a 90+ PageSpeed score even with motion turned up.

What's Next

Multi-section editing and custom animations are the foundation for a larger workflow shift we're shipping over the next quarter: shared style libraries across projects, animation presets you can save and reuse, and team-level brand profiles that enforce motion consistency across every site an agency ships. Power users managing many sites should also revisit our notes on managing multiple sites in Draftly to see how these features stack with site-level organization.

Both features are live on all paid plans starting today. If you're on the free tier, you can preview multi-section editing for up to three sections per project.

New in Draftly: Multi-Section Editing and Custom Animations

New in Draftly: Multi-Section Editing and Custom Animations

What Multi-Section Editing Actually Does

When to use multi-section editing

Custom Animations: Motion That Matches Your Brand

Why custom timing matters more than you think

How to Use Both Features Together

A quick example: rebranding a 14-section homepage

Performance Considerations

What's Next

Frequently Asked Questions

Related Articles

Draftly Page Transitions and Section Animations: A Design Guide

Using AI Image Generation in Draftly: Get the Best Results

Draftly Section Library: Every Block and When to Use It