Elementor Animated Story Line Premium Design
Get Premium

Elementor Animated Story Line Premium Design

Element.How also offers premium tutorials! Check them here:

Elementor Animated Story Line Premium Design

Table of Contents

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:

Copy Template
Download Template

Please purchase access and be logged in to access this template.

 

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 quite 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.

Elementor Animated Story Line Premium Design

Access tutorial

$39/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Elementor Animated Story Line Premium Design
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 6 months money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Support not needed!Due to personal circumstances, I no longer offer support. The vast majority of customers never needed support to start with, so chances are you will be just fine, the tutorials and templates provided are complete.

    I also extended the refund window from 1 to 6 months, during which you can get a full refund for any reason.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

13 Responses

  1. 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"?

    1. 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!

  2. 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:

    let stacksAt = 1025; /* change to 768 if you want to exclude tablets viewports */

    to

    let stacksAt = 0;

    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!

  3. Hey Maxime

    So I love this design, but I wonder if there is an option to change the leaderline? The only solution I've found so far is to change the line through CSS but that seems to create a hitch in the animation...

    1. I used the following to make the line into a dot:
      .leader-line use {
      stroke-linecap: round;
      stroke-dasharray: 0, 16;
      }
      But it seems to conflict with the dynamic dashoffset... Is there a way to alliate this issue?

      1. Hey Jeremie!

        Ignore my previous comment. It just isn't working....

        The only way I found is to change the CSS until the animation matches:

        .leader-line use {
        stroke-linecap: round;
        stroke-dasharray: 0, 24;
        }

        But then the dotted line is different too...

      1. It finally kicked in. Up loaded it 3 times before I got it to work, not sure what was up. Is there anyway to get these to show in editor mode? Would be so much easy to adjust styles.

  5. Hey Maxime,
    Sorry if this is beyond the tutorial. The story line works great, our art director is using it in a bunch of places. It's just what we need. But, for one of the layouts, we're trying to use it with sticky columns. It works fine on page load but then it gets...lost. Is there anything you might recommend? Like is there a way to make it disappear after it animates maybe?

    Thanks!

    1. Greetings Lesley!

      Near the end of the JavaScript, just after the line that says

      initLeaderLines();

      try adding this:

      if (window.innerWidth > 767) {
window.addEventListener('scroll',function() {
    lineInstances.forEach((line) => {
        line.position();
    });
})
}

      Here I excluded mobile devices as probably you don't have the sticky column there.

      Cheers!

      1. Thanks, Maxime! That works great, it stays connected to both elements perfectly.

        Thanks so much for the help!

Leave a Reply