GSAP Line Drawing

GSAP Line Drawing lets us fill in SVG strokes as users scroll our Elementor-designed pages.

watch the GSAP Line Drawing tutorial

Play Video

GSAP Line Drawing lets you create an effect that makes it look like the SVG is being drawn in real time along with page scrolling.

GSAP Scrolltrigger now features an Event Type called GSAP Line Drawing. Line Drawing can be used in conjunction with any SVG file with a stroke, and when set up correctly, will make sure that the stroke of that same SVG will fill in or fill out as the user scrolls the page, according to the Canvas Options, the Transformation Options, and with its direction determined by the To or From function.

SVGs that only posses fill are supported as well, and we will be able to change the fill color and opacity, but they of course will not present any sort of Line Drawing animation.

Refer to the GSAP Scrolltrigger module page and the GSAP Scrolltrigger Overview for more information on how to setup the canvas and other Event (Tween) options for every event type.

GSAP Line Drawing and the HTML Widget.

In order for GSAP Line Drawing to work correctly, we won’t actually be uploading our SVG to an image widget. We will instead copy its code into an HTML widget. We can prepare our SVG to make sure it will be fully compatible with Line Drawing by opening it or making our own in Illustrator, as outlined in the GSAP Line Drawing Tutorial.

It’s important to note that, when targeting our HTML Widget in our GSAP Tween (Event), we will want to enter an asterisk (*) to the right of our selector (e.g. #mysvg *) so that Elementor will know that the animation needs to apply to all elements within that HTML widget. This is in the same vein as needing to target the HTML tag when using the Split Text Event Type.

Available Transformation Options.

After everything has been set up the way we would with any other GSAP Event Type, including the Trigger and Target elements, the Canvas options and, if applicable and necessary for our needs, Animation and Pin Options, we can set up the Transformations to be applied to our SVG.

Transformation options for the Line Drawing Event Type are Opacity Start and End points and Fill and Stroke Start and End Color values. The actual Line Drawing animation will happen by default on the targeted SVG, so we do not need to set it up in the transformation options. Changes in the opacity, fill and stroke colors will happen alongside the Line Drawing animation. What we can do however, is change the Easing function that will be applied.

Immediate Render

Just like the GSAP Split Text Event Type, when using a From Tween Function, it is heavily recommended to toggle on Immediate Render in the animation options.

This will make sure that the starting values, represented by the Transformation Settings values in a From Tween, will be applied as soon as the Target Element appears in the Viewport, and not when the animation starts, avoiding unsightly jumps or undesirable behavior.

Scope : Extension
Dependencies: Elementor

Frequently Asked Questions

GSAP Line Drawing is GSAP animation that creates the illusion of an SVG being drawn in real-time as a user scrolls down a webpage. When used with GSAP Scrolltrigger, it allows for dynamic SVG animations based on scrolling actions.
To use GSAP Line Drawing in Elementor, you should copy your SVG code into an HTML widget. When targeting this widget in your GSAP Tween, add an asterisk () to the selector (e.g., #mysvg ) to apply the animation to all elements within the HTML widget. Ensure your SVG is prepared correctly, following the GSAP Line Drawing Tutorial.
For GSAP Line Drawing, you can control Opacity Start and End points, Fill and Stroke Start and End Color values, and the Easing function to be applied. It’s also recommended to enable Immediate Render when using a From Tween Function to avoid unwanted jumps or behavior at the start of the animation.

THIS FEATURE IS PART OF :

the spoon was never there in the first place

SERVICES

SERVICE #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

SERVICE #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

SERVICE #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

More Modules

Checkbox & Radio Field Control
Swatches Widget New
Calculation Field New
Bundle Maker Widget New
Custom DB Value Dynamic Tag New
Form Field Validation
3D Model Widget
Signature Field
Salesforce CRM Form Action
JetEngine Dynamic Visibility: LearnDash Addon
Dynamic HTML Attrributes Repeater New
JetSmartFilters: BuddyBoss Addon New
GSAP Slider Tween New
Image Upload UI New
WooCommerce Related Courses Tag
Datepicker Field
GSAP ScrollTrigger
Checkout Anything Form Action
Frontend Post Editing New
Cookies Dynamic Tag New