I have a scroll function for animation that I need to call on different elements at different times

Question

I am building a page that I want to have multiple animations fire when they come into view. Originally I was using the same scrollFunction and just repeating the whole function every time for each element I wanted animated. Trying to avoid writing the same function over and over so I adjusted it a bit so all I had to do is call the function with different arguments. I have it working but if I call it more than 4 times any animation after that fires immediately. All the ones before work just fine and only fire when in view. I have changed class names, animation names, tried it on different elements on different parts of the page, still fires immediately. Also I can not use any jquery past v1.11 because the editor I work with has not been updated and I can not use a cdn. HTML for one of the animations that works and one that fires immediately:

 // this works fine 

                WOLF
                Kitchen and Bath Cabinets
            
// spacer added for code not associated with animations


        
            the wolf advantage
            
                


                Our culture of continuous improvement keeps us on the leading edge to ensure satisfactory
                    performance. 
            

            
               
                
                Vast inventories and smart logistics solutions combine to get you the products you need when you need
                    them. Plus, select products from Wolf are available with Quick Ship for delivery in days, not weeks.
                
            

            
              
                We offer premium products without the premium price. Our high-quality products are engineered to
                    provide unmatched value and are backed by industry-leading warranties.
                
            
        
    
// spacer added for code not associated with animations

  
             Classic
             Signature
             Endeavor
             Designer
             Builders-Mix
            WOLF kitchen cabinets
         
// spacer added for code not associated with animations

// This is much further down the page but fires as soon as I start scrolling
  
    WOLF
    Bathroom Vanity Tops

// spacer added for code not associated with animations


//This works fine

             Solid Surface
             Quartz
             Natural Granite
             Cultured Marble
            WOLF bathroom vanity tops

Animations and CSS:

// This works Fine

.protectionSvg{
    width:150px;
    height:150px;
}
.protectionPath{
    max-width:150px;
    fill:#56868D;
    stroke-width:1px;
}
.protectionSvg{
    fill:transparent;
}
.protectionPath{
    stroke:#56868D;
    fill:none;
    stroke-width:3px;
    stroke-dasharray:650;
    stroke-dashoffset:650;
}
.protectionCircle{
    stroke:#56868D;
    fill:none;
    stroke-width:3px;
    stroke-dasharray:650;
    stroke-dashoffset:650;
}
.qualitySvg{
    width:150px;
    width:150px;
}
.qualityCircle{
    fill:none;
    stroke:#56868D;
    stroke-width:3px;
    stroke-dasharray:650;
    stroke-dashoffset:650;
}
.qualityPath{
    fill:none;
    stroke:#56868D;
    stroke-width:1px;
    stroke-dasharray:650;
    stroke-dashoffset:650;
}
.ribbonSvg{
    width:150px;
    height:150px;
}
.ribbonPath{
    fill:none;
    stroke:#56868D;
    stroke-width:1;
    stroke-dasharray:650;
    stroke-dashoffset:650;
}
.ribbonCircle{
    fill:none;
    stroke:#56868D;
    stroke-width:3px;
    stroke-dasharray:650;
    stroke-dashoffset:650;
}
.ribbonGroup{
    stroke-dasharray:650;
    stroke-dashoffset:0;
}
.innerAnim{
    animation: inner-anim 2s 1.5s linear forwards;
    -webkit-animation: inner-anim 2s 1.5s linear forwards;
}
.circleAnim{
    stroke-dasharray:650;
    stroke-dashoffset:650;
    animation: circle-anim 2s linear forwards;
    -webkit-animation: circle-anim 2s linear forwards;
}

@keyframes circle-anim{
    0%{
        stroke-dashoffset:650;
    }
    100%{
        stroke-dashoffset:0;
    }
}
@-webkit-keyframes circle-anim{
    0%{
        stroke-dashoffset:650;
    }
    100%{
        stroke-dashoffset:0;
    }
}
@keyframes inner-anim{
    0%{
        stroke-dashoffset:650;
        fill:transparent;
    }
    100%{
        stroke-dashoffset:0;
        fill:#FFE09C;
    }
}
@-webkit-keyframes inner-anim{
    0%{
        stroke-dashoffset:650;
        fill:transparent;
    }
    100%{
        stroke-dashoffset:0;
        fill:#FFE09C;
    }
}

.heroTitle{
    display:inline-block;
    position: relative;
    transform:scale(0);
    animation: hero 1s linear forwards;
    -webkit-animation: hero 1s linear forwards;
}
.heroTitle::after{
    content: "";
    position: absolute;
    top:50%;
    right:-25%;
    height:2px;
    width:0;
    background-color:#ececec;
    animation: sidelines .5s 1.5s linear forwards;
    -webkit-animation: sidelines .5s 1.5s linear forwards;
}
.heroTitle::before{
    content: "";
    position: absolute;
    top:50%;
    left:-25%;
    height:2px;
    width:0;
    background-color:#ececec;
    animation: sidelines .5s 1.5s linear forwards;
    -webkit-animation: sidelines .5s 1.5s linear forwards;
}
.heroSubTitle{
    animation: hero 1s .1s linear forwards;
    -webkit-animation: hero 1s .1s linear forwards;
}
@keyframes hero {
    from{
        transform:scaleX(0);
    }
    to{
        transform:scaleX(1);
    }
}
@-webkit-keyframes hero {
    from{
        transform:scaleX(0);
    }
    to{
        transform:scaleX(1);
    }
}
@keyframes sidelines {
    to{
        width:25%;
    }
}
@-webkit-keyframes sidelines {
    to{
        width:25%;
    }
}


.subTitle{
    position: relative;
    font-size:2.2rem;
    line-height:55px;
}
.subTitle::before{
    content:"";
    position: absolute;
    top:5px;
    left:-10px;
    height:0;
    width:2px;
    background:#000;
    animation: sub-title-lines 1s linear forwards;
    -webkit-animation: sub-title-lines 1s linear forwards;
}
.subTitleAnim{
    display:inline-block;
    font-weight:200;
    margin-right:35px;
    transform:scaleX(0);
    transform-origin:left;
    animation: sub-title-anim 1s 1s linear forwards;
    -webkit-animation: sub-title-anim 1s 1s linear forwards;
}
@keyframes sub-title-lines {
    from{
        height:0%;
    }
    to{
        height:90%;
    }
}
@-webkit-keyframes sub-title-lines {
    from{
        height:0%;
    }
    to{
        height:90%;
    }
}
@keyframes sub-title-anim {
    to{
        transform:scaleX(1);
    }
}

@-webkit-keyframes sub-title-anim {
    to{
        transform:scaleX(1);
    }
}

// This fires immediately
.bathTitleAnim{
    animation: bathTitleAnim 2s forwards;
    -webkit-animation: bathTitleAnim 2s forwards;
}
.bathSubAnim{
    animation: bathTitleAnim 2s forwards;
    -webkit-animation: bathTitleAnim 2s forwards;
}
@keyframes bathTitleAnim{
    from{
        transform:scale(0);
    }
    to{
        transform:scale(1);
    }
}
@-webkit-keyframes bathTitleAnim{
    from{
        transform:scale(0);
    }
    to{
        transform:scale(1);
    }
}

 $(document).ready(function () {
    let scrollFunction = function (elem, anim) {
      $(window).scroll(function () {
        $(elem).each(function (i) {
          var bottom_of_object = $(this).position().top;
          var bottom_of_window = $(window).scrollTop() + $(window).height();
          if (bottom_of_window > bottom_of_object) {
            return $(this).addClass(anim)
          }
        });
      });
    }
    scrollFunction('.circle', 'circleAnim');
    scrollFunction('.inner', 'innerAnim');
    scrollFunction('.sub', 'subTitle'); 
    scrollFunction('.stylesItem', 'subTitleAnim');
    scrollFunction('.callBath', 'bathTitleAnim');  // fires immediately
    scrollFunction('.callBathSub', 'bathSubAnim');  // fires immediately
  });

I have a scroll function for animation that I need to call on different elements at different times

0 Answers