In this tutorial, I will show you how to add an animated line that goes from element to element, across your entire Elementor page.
With this method, the line is generated automatically, so you don't even have to worry about creating properly sized SVG lines in illustrator.
This method is very user friendly and easy to replicate and work with!
Here is what you will learn:
Features:
- Polyvalent: Works for any amount of lines
- Responsive: Works well on desktop, tablet and mobile
- Customizable: Set the size and color of the line as you wish, as well as the animation duration
- LeaderLineJS: We are using the LeaderLineJS library for this
- Easy to replicate: Set from and to elements, and the line is drawn in-between these
- Works for various layouts: In my demo I have a simple layout based on cards, however you can trace the line from any element, to any element, so this can be qui flexible and work with different kinds of designs
Let's get started!
First, let's add the required code to your page
This is a premium tutorial. Purchase access to unlock the full tutorial.
3 Responses
Awesome! As a variation, is there a way to connect the tracing of the line to the scroll? So that if you scroll down, the line is traced, and if you scroll up, the line is "untraced"?
Greetings!
Unfortunately this isn't possible with this tutorial and the JS library used here.
To be frank though, unless you are going to add smooth scrolling (which is rarely a good idea as it's scroll jacking), I found that having the whole line trace in one animation is more pleasant and smoother.
Cheers!
Greetings everyone!
I was asked if it was possible to set specific customSettings for tablet and mobile too, instead of just reverting back to 'auto' everything, and stacking it all.
Yes it is! Here is how you can do that.
I didn't add these instructions directly in the tutorial to prevent making it too complicated.
At the start, you have the leaderLines JavaScript array:
let leaderLines = [ /* * from: element ID of the start element * to: element ID of the end element * * customSettings: object with custom settings for the line, such as startSocket, endSocket, color * startSocket and endSocket can be 'auto', 'top', 'right', 'bottom', 'left' */ { from: 'step_1', to: 'step_2', }, { from: 'step_2', to: 'step_3', }, /* ...etc, more line settings here */ ];Directly below, add this:
/* leaderLines settings for tablet devices */ if (window.innerWidth < 1025) { leaderLines = [ { from: 'step_1', to: 'step_2', }, { from: 'step_2', to: 'step_3', }, /* ...etc, more line settings here */ ]; } /* leaderLines settings for mobile devices */ if (window.innerWidth < 768) { leaderLines = [ { from: 'step_1', to: 'step_2', }, { from: 'step_2', to: 'step_3', }, /* ...etc, more line settings here */ ]; }And then, update these leaderLines JavaScript arrays with the settings of your choice, for each viewport.
You will have to repeat each setting! You can't just update those you want different... so you have to enter again every setting for every line.
In other words, if you originally had 8 lines, then you will need the same 'from' and 'to' in the tablet and mobile settings too. The customSettings can be different however. [To be very technical, if you wanted to, you could in fact even change the 'from' and 'to', if you wanted the line to go to and from different elements on different viewports.]
Finally, you also need to change this line:
to
Keep in mind, this won't update on window resize. It will only work on page load. So for instance, if you open the page in your browser, and then check with the DevTools responsive preview mode, you will need to refresh the page to see the mobile settings in action.
I hope this helps!
Cheers!