Animate a modal transition, with step counter.

Modal-Animation-&-Check-Fields-For-Value.js

 var modal_steps = (function() {

        // variables
        var s = {
            step_one: $('.address-check__step.step-1'),
            step_two: $('.address-check__step.step-2'),
            step_three: $('.address-check__step.step-3'),
            step_one_bar_mask: $('.js-step-bar-1 .bar-mask'),
            step_two_bar_mask: $('.js-step-bar-2 .bar-mask'),
            step_one_circle: $('.step-circle.circle-1'),
            step_two_circle: $('.step-circle.circle-2'),
            step_three_circle: $('.step-circle.circle-3'),
            step_one_button: $('.js-btn-step-1'),
            step_two_button: $('.js-btn-step-2'),
            step_two_zip: $('#zip'),
            step_two_street: $('#street'),
            step_two_city: $('#city'),
            step_two_state: $('#state'),
            step_two_unit_type: $('#unit_type'),
            step_two_unit: $('#unit'),
            step_three_serviceable: $('.step-3__is-servicable'),
            step_three_not_serviceable: $('.step-3__is-not-servicable'),
        };

        //functions
        return {

            init: function() {
                modal_steps.step_progression();
            },

            step_progression: function() {
                s.step_one_button.on('click', function() {
                    s.step_one_bar_mask.addClass('complete');
                    s.step_one_circle.addClass('complete').removeClass('active');
                    s.step_one.fadeOut(500);

                    setTimeout( function() {
                        s.step_one_bar_mask.removeClass('active');
                        s.step_one.addClass('is-hidden');
                        s.step_two.fadeIn(500).removeClass('is-hidden');
                    }, 650);

                    setTimeout( function() {
                        s.step_two_circle.addClass('active');
                    }, 700);

                    setTimeout( function() {
                        s.step_two_bar_mask.addClass('active');
                    }, 700);
                });

                s.step_two_button.on('click', function() {
                
                    //CHECK FOR VALUES IN FIELDS AND ADD .error IF THERE IS NOT
                    if ( s.step_two_zip.val().length < 1 ) { //ZIP CHECK
                        s.step_two_zip.addClass('error');
                        s.step_two_button.stopPropagation();
                        } else {
                            s.step_two_zip.removeClass('error');
                    }       
                    
                    if ( s.step_two_city.val().length < 1 ) { //CITY CHECK
                        s.step_two_city.addClass('error');
                        s.step_two_button.stopPropagation();
                        } else {
                            s.step_two_city.removeClass('error');
                    }
                    
                    if ( s.step_two_state.val().length < 1 ) { //STATE CHECK
                        s.step_two_state.addClass('error');
                        s.step_two_button.stopPropagation();    
                        } else {
                            s.step_two_state.removeClass('error');
                    }
                    
                    if ( s.step_two_street.val().length < 1 ) { //STREET ADDRESS CHECK
                        s.step_two_street.addClass('error');
                        s.step_two_button.stopPropagation();    
                        } else {
                            s.step_two_street.removeClass('error');
                    }
                    
                    if ( s.step_two_unit_type.val().length < 1 ) { //UNIT TYPE CHECK
                        s.step_two_unit_type.addClass('error');
                        s.step_two_button.stopPropagation();    
                        } else {
                            s.step_two_unit_type.removeClass('error');
                    }
                    
                    if ( s.step_two_unit.hasClass('is-visible') === true ) {
                        if ( s.step_two_unit.val().length < 1) { //UNIT NUMBER CHECK
                            s.step_two_unit.addClass('error');
                            s.step_two_button.stopPropagation();
                            } else {
                                s.step_two_unit.removeClass('error');
                            }
                    }
                    
                    //END VALUE CHECK
                    
                        s.step_two_bar_mask.addClass('complete');
                        s.step_two_circle.addClass('complete').removeClass('active');
                        s.step_two.fadeOut(500);

                        setTimeout( function() {
                            s.step_two_bar_mask.removeClass('active');
                            s.step_two.addClass('is-hidden');
                            s.step_three.fadeIn(500).removeClass('is-hidden');
                        }, 650);

                        setTimeout( function() {
                            s.step_three_circle.addClass('active');
                        }, 700);
                    });
                    
                });

            }
        };
    })();