Elementor Animated Story Line Premium Design

Elementor Animated Story Line Premium Design

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

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:

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

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
  • 30 day 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.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • 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.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
* 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 2737 Elements right here:

Checkout the Elementor Addon Finder directly

3 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!

Leave a Reply