Home Forums EZY Template Steps Animation Synchronization Breaks When Adding Fourth Step

This topic contains 1 reply, has 2 voices, and was last updated by  Support2 4 months, 3 weeks ago. This post has been viewed 188 times

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10026675

    TFXceptional
    Participant

    I’ve modified the ‘steps’ section from multi-purpose-3.html to include a fourth step. I’ve already repositioned the steps properly, but now the dots animation and the current active step are out-of-sync. I had a thorough look at theme.js and theme.init.js, but I don’t really understand how the dots animation timing works.

    What I want to know is what values do I need to set in the data-plugin-options attribute(s) to synchronize the dots animation with the active step transition timing?

    Here’s the HTML & altered CSS that I’m working with:

    HTML:

    <div class="steps steps-primary steps-style-2">
        <div class="dots appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1200">
            <img class="dots-mask" src="img/svg/steps-dots-bg-light.svg" alt="" />
            <div class="dots-color"></div>
            <div class="dots-color-dark"></div>
        </div>
        <div class="item appear-animation" data-appear-animation="stepsFadeInUp" data-plugin-options="{'accY': -200}">
            <h2 class="item-title"><span>1.</span>Discover</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitasellus blandit massa enim.</p>
            <a class="learn-more" href="#">Learn More <i class="fas fa-angle-right"></i></a>
        </div>
        <div class="item appear-animation" data-appear-animation="stepsFadeInUp" data-appear-animation-delay="300" data-plugin-options="{'accY': -200}">
            <h2 class="item-title"><span>2.</span>Define</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitasellus blandit massa enim.</p>
            <a class="learn-more" href="#">Learn More <i class="fas fa-angle-right"></i></a>
        </div>
        <div class="item appear-animation" data-appear-animation="stepsFadeInUp" data-appear-animation-delay="600" data-plugin-options="{'accY': -200}">
            <h2 class="item-title"><span>3.</span>Develop</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitasellus blandit massa enim.</p>
            <a class="learn-more" href="#">Learn More <i class="fas fa-angle-right"></i></a>
        </div>
        <div class="item appear-animation" data-appear-animation="stepsFadeInUp" data-appear-animation-delay="800" data-plugin-options="{'accY': -200}">
            <h2 class="item-title"><span>4.</span>Deliver</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitasellus blandit massa enim.</p>
            <a class="learn-more" href="#">Learn More <i class="fas fa-angle-right"></i></a>
        </div>
    </div>

    CSS:

    .steps .item:nth-child(2) {
    	left: 10.4%;
    }
    
    .steps .item:nth-child(3) {
    	left: 36.8%;
    }
    
    .steps .item:nth-child(4) {
    	left: 63.2%;
    }
    
    .steps .item:nth-child(5) {
    	left: 89.6%; /* Was originally 89.5% */
    }
    .steps.steps-style-2 .item .item-title:after {
        right: 45px;
        left: 45px;
    }


    Template Version: 1.1.0
    #10026682

    Support2
    Keymaster

    Hello,

    The steps plugin was originally created for work with 3 steps only.
    But with some customization you can adapt for 4 items, for it please change all steps code at (js/theme.js) to:
    https://pastebin.com/raw/jGDA4wDP

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    • This reply was modified 4 months, 3 weeks ago by  Support2.
Viewing 2 posts - 1 through 2 (of 2 total)