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.

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.

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.

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

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.

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.

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.

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.