Classic Elementor widget · Pro

GSAP DrawSvg for Elementor: SVG line animation that draws your paths stroke by stroke

GSAP DrawSvg is the Elementor draw SVG widget for line drawing. Paste the SVG code, pick how the line should draw, and it plays on page load, as Elementor SVG animation on scroll when the drawing comes into view, or in step with the scroll. Logos, signatures, icons and route maps, with no code.

Get Animation Addons Pro See the live demos

Paste any SVG
On load, on scroll or scrub
Loops and yoyo
GSAP DrawSVG built in

Classic widget · Elementor 3 and 4 · ProUpdated October 2026

from: 0% → 100%

The short answer

What is GSAP DrawSvg for Elementor?

GSAP DrawSvg is a Pro Elementor widget from Animation Addons that draws an SVG line by line. You paste SVG code into the widget, and it animates the stroke of every path with GSAP's DrawSVG plugin: on page load, when the drawing scrolls into view, or scrubbed with the scroll.

As an Elementor SVG line animation widget it is a widget, not an extension: it holds its own SVG and you place it like an image. Only strokes draw, so a shape that is filled and has no stroke shows up but has no line to animate. It is a classic widget for the Elementor 3 editor that keeps working in Elementor 4. Building in Elementor 4's new editor? The Pro Draw SVG atomic element is the atomic version.

Also searched as: elementor draw svg, elementor draw svg widget, elementor svg animation, elementor svg line animation, elementor svg stroke animation, elementor svg path animation, elementor svg drawing animation, elementor svg animation on scroll, elementor handwriting animation, elementor signature animation, elementor animated svg logo, gsap drawsvg in elementor, how to animate svg in elementor, elementor svg animation not working, elementor line drawing animation.

Key factsGSAP DrawSvg · Animation Addons for Elementor

Plan: Pro
Widget type: Classic Elementor widget (V3), works in Elementor 4
Works with: Elementor Free and Elementor Pro
Input: SVG Code you paste: paths, circles, rects, lines, polylines, polygons, ellipses
Trigger: Page load, scroll into view, or scrub with the scroll
Animation Method: from, to or fromTo, with From Value and To Value
Timing: Duration, delay, repeat, repeat delay, yoyo and ease
Get it: Animation Addons Pro

Live demos

SVG drawing animations, live

Five ways to draw an SVG, each on a small site: a brand mark, a loader, a house, a handwritten word and a route map. Most loop on their own; the route map draws as you scroll inside its frame.

Arolax^®WorkIdentityStudio

Brand identity

A mark that draws itself in

Four petals, one continuous line. We drew the new Arolax mark so it can be animated as a single stroke, on the site, in decks and in the end card of every film.

Logo
Motion rules
Colour

Logos and brand marks

Brand mark that draws itself

An identity page for a design studio. The gradient mark is one closed line, an Elementor animated SVG logo. It waits until it is a quarter of the way up the screen, draws over six seconds with a soft ease, then erases and draws again for as long as the page is open.

Scroll to it: the mark draws, then reverses

Turn on Enable ScrollTrigger and set Trigger Start to top 75%. Set Animation Duration to 6 and switch on Enable Yoyo. The repeat is endless, with a half second pause.

HaldenDashboardReportsSettings

Building your March report

Pulling payments from 12 accounts. This takes a few seconds.

Loaders and progress

Loading circle that fills a disc

A report page on a finance tool with a loading circle. The circle's stroke is as wide as the circle, so the drawing fills the disc like a clock hand. It starts a second after the page loads and sweeps in and out.

Watch it: no scroll needed

Leave Enable ScrollTrigger off so it plays on load. Set From Value (Start) to 0%, Animation Duration to 4 and switch on Enable Yoyo.

Maison FormeHomesProcessJournal

New project

A cottage at the edge of the woods

Every Maison Forme home starts as a line drawing on the first visit. Walls, roof, windows and the old oak by the gate.

Rooms: 3 bed
Size: 120 m²
Ready: Spring

Line illustrations

House drawn in thin lines

A new-build page for a home builder, with the house drawn in thin white lines. It is an Elementor line drawing animation built from 15 segments. Each one gets a share of the four seconds that matches its length, so the ground line draws slowly and the door knob is done at once.

Watch the long lines lag behind the short ones

Paste the house in SVG Code, leave Enable ScrollTrigger off, set Animation Duration to 4 and switch on Enable Yoyo. The widget splits the paths into segments by itself.

ShallyLookbookJournalShop

From the studio in Milan

Notes from a week of fittings

Linen for the summer line, a new tailor on Via Tortona and three looks we keep coming back to.

Signatures and handwriting

Handwritten word on a fashion journal

A fashion journal page with a word written in one thick pen stroke, left to right, then rubbed out from the end. Use the same idea for an Elementor handwriting animation or an Elementor signature animation. The red dot is a filled circle, so it stays in place.

Watch the word write itself

Paste the word in SVG Code as one stroke, set Animation Duration to 4 and switch on Enable Yoyo. Filled shapes such as the dot do not draw.

MalepèreWinesVisitShop

Estate walk

Seven stops, one easy hour

A gentle loop from the cellar door, through the Syrah rows to the tasting room.

StartCellar door10 minOld press20 minSyrah rows30 minChapel40 minLookout50 minOak barrels1 hourTasting room

Routes and maps

Walking route drawn as you scroll

A walking route drawn twice, a wide grey line under a thin green one. The line follows the scroll: it starts when the map reaches the middle of the view and finishes when its end reaches the bottom.

Scroll inside the map to draw the route

Turn on Enable ScrollTrigger and Enable Scrub. Set Animation Method to fromTo, From Value (Start) to 0% and To Value (End) to 100%. Set Trigger Start to top center and Trigger End to bottom bottom.

Features

Key features of GSAP DrawSvg

What the widget gives you, each tied to a setting in the Elementor panel.

Paste any SVG

Put your markup in SVG Code. Every path, circle, rect, line, polyline, polygon and ellipse in it gets an Elementor SVG stroke animation.

On load or on scroll

Leave Enable ScrollTrigger off to draw when the page loads, or turn it on and set Trigger Start and Trigger End.

Scrub with the scroll

Turn on Enable Scrub and the SVG path reveal follows the scroll position, forward and back.

From, to or fromTo

Choose the Animation Method and set From Value (Start) and To Value (End): draw in, erase, or grow from the middle with "50% 50%".

Multi-segment paths

A path with several segments is split, and each segment draws at a speed that matches its length. That makes an Elementor SVG path animation look like a pen at work.

Loops and yoyo

Repeat the drawing endlessly, pause between loops, and use Enable Yoyo to play it back in reverse.

Duration and easing

Set the Animation Duration for the whole drawing, a delay before it starts, and an ease such as sine, power or linear.

GSAP without the setup

Animation Addons Pro loads GSAP, ScrollTrigger and the DrawSVG and MotionPath plugins for you, so you animate SVG lines without a script tag. You can also make the drawing a link, in the same tab or a new one.

Step by step

How to animate SVG in Elementor

Five steps. The bold names are the labels in the Elementor panel.

Install Animation Addons Pro, then turn on GSAP DrawSvg in Animation Addons → Elements.
In Elementor, search the panel for GSAP DrawSvg and drag it onto the page.
Open Settings and paste your SVG into SVG Code. Make sure the lines are strokes, not fills.
Pick the Animation Method, the From Value (Start) and To Value (End), the Animation Duration and Enable Yoyo.
To draw on scroll, turn on Enable ScrollTrigger and set Trigger Start and Trigger End, or Enable Scrub. Then preview the page.

Get Animation Addons Pro Part of Animation Addons Pro · Works with Elementor Free

Honest comparison

GSAP DrawSvg vs the Draw SVG atomic element

Animation Addons Pro has two ways to draw SVG lines. Both use GSAP DrawSVG; they differ in editor and in how much timing control you get.

GSAP DrawSvg vs the Draw SVG atomic element
Feature	GSAP DrawSvg (classic widget)	Draw SVG (atomic element)
Plan	Animation Addons Pro	Animation Addons Pro
Editor	Elementor 3 and Elementor 4 (classic widget)	Elementor 4 Atomic Editor
Engine	GSAP DrawSVG	GSAP DrawSVG
How you add the SVG	Paste SVG Code in the panel	Add a stroke-based SVG
When it draws	On load, on scroll, or scrubbed with the scroll	When the element enters the view
Method, repeat, yoyo and ease in the panel	Yes	Not listed on its page
Native atomic element (Classes, Variables)	No	Yes

Compared from the old demo page, the widget's script on that page, the Animation Addons docs and the Draw SVG atomic element page, October 2026.

FAQ

Questions about GSAP DrawSvg

How do I animate an SVG in Elementor?

Add the GSAP DrawSvg widget, paste your SVG into SVG Code and pick an Animation Method and duration. The lines then draw themselves stroke by stroke, an Elementor SVG drawing animation with no code.

Why is my Elementor SVG animation not working?

Only strokes draw. A shape with a fill and no stroke appears, but has no line to animate. Export outlines as strokes, or add a stroke colour and width to the paths.

Can I run an Elementor SVG animation on scroll?

Yes. Turn on Enable ScrollTrigger and set Trigger Start, for example "top 75%". Turn on Enable Scrub to tie the drawing to the scroll position instead.

Can the animation loop?

Yes. Set the repeat to -1 for an endless loop, add a pause between loops, and turn on Enable Yoyo to erase the line before it draws again.

What do From Value and To Value mean?

They are parts of the line in percent. "0%" is nothing, "100%" is the whole line and "50% 50%" is a point in the middle. The from method draws from the From Value to the full line.

What happens with several paths?

Each path, and each segment of a path, gets its own tween. All start together, and each takes a share of the duration that matches its length.

What is GSAP DrawSvg in Elementor?

It is a Pro widget from Animation Addons that holds your SVG and animates its strokes with the GSAP DrawSVG plugin. You set it in the Elementor panel, so you write no GSAP code.

Can I make a handwriting effect?

Yes. Draw the word as one stroke, paste it in SVG Code and set a duration of a few seconds. It writes left to right like a pen, which suits signatures and a handwriting effect on a headline.

Do I need to load GSAP myself?

No. Animation Addons Pro loads GSAP, ScrollTrigger and the DrawSVG and MotionPath plugins on the page for you.

Does GSAP DrawSvg need Elementor Pro?

No. It works with Elementor Free and is part of Animation Addons Pro. It is a classic widget, so it also runs in Elementor 4.

Pairs well with

Related Elementor widgets

Animation widgets that work well with GSAP DrawSvg, as listed on the original page. See all 102 widgets.

Free

Draw the line, then let it move

SVG line animation on load, on scroll or in step with the scroll, built in Elementor.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

15-day money-back guarantee
Rated 4.6 / 5 on WordPress.org
No Elementor Pro needed
Elementor 3 & 4 in one license