2
\$\begingroup\$

The following plays and replays CSS animations on load and scroll.

It works but I'm wondering if there is a better way to write this, so it's cleaner and performs better.

<script>
    var invoiceAnim = document.getElementsByClassName('mod-anim__invoice')[0],
    invoiceBgLoading = document.getElementsByClassName('mod-anim__invoice__bg-loading')[0];
    invoiceLoadingBar = document.getElementsByClassName('mod-anim__invoice__loading-bar')[0];
    invoiceModern = document.getElementsByClassName('mod-anim__invoice__modern')[0],
    invoiceClassic = document.getElementsByClassName('mod-anim__invoice__classic')[0],
    invoiceContemporary = document.getElementsByClassName('mod-anim__invoice__contemporary')[0],

    paymentAnim = document.getElementsByClassName('mod-anim__payment')[0];
    paymentInterface = document.getElementsByClassName('mod-anim__payment__interface')[0],
    paymentBtn = document.getElementsByClassName('mod-anim__payment__btn-pay')[0],
    paymentSuccess = document.getElementsByClassName('mod-anim__payment__success')[0],

    accountingAnim = document.getElementsByClassName('mod-anim__accounting')[0],
    accountingBgReport = document.getElementsByClassName('mod-anim__accounting__bg-report')[0],
    accountingBars = document.getElementsByClassName('mod-anim__accounting__bars')[0],

    payrollAnim = document.getElementsByClassName('mod-anim__payroll')[0],
    payrollInterface = document.getElementsByClassName('mod-anim__payroll__interface')[0],
    payrollReviewBtnRollover = document.getElementsByClassName('mod-anim__payroll__btn-review-payroll-rollover')[0],
    payrollWhiteBar = document.getElementsByClassName('mod-anim__payroll__white-bar')[0],
    payrollPayStub = document.getElementsByClassName('mod-anim__payroll__pay-stub')[0],
    payrollApproveBtn = document.getElementsByClassName('mod-anim__payroll__btn-approve-payroll')[0],
    payrollApproveBtnRollover = document.getElementsByClassName('mod-anim__payroll__btn-approve-payroll-rollover')[0],

    invoicePlayState = 'notLoaded',
    paymentPlayState = 'notLoaded',
    accountingPlayState = 'notLoaded',
    payrollPlayState = 'notLoaded';

    // (mouseover) > replay invoice
    invoiceAnim.addEventListener('mouseenter', function() {
      if (invoicePlayState === 'readyToReplay'){
        console.log('invoice anim hover, IN IF');
        invoiceBgLoading.style.webkitAnimation = 'none';
        invoiceLoadingBar.style.webkitAnimation = 'none';
        invoiceModern.style.webkitAnimation = 'none';
        invoiceClassic.style.webkitAnimation = 'none';
        invoiceContemporary.style.webkitAnimation = 'none';

        setTimeout(function() {
          invoiceBgLoading.style.webkitAnimation = '';
          invoiceLoadingBar.style.webkitAnimation = '';
          invoiceModern.style.webkitAnimation = '';
          invoiceClassic.style.webkitAnimation = '';
          invoiceContemporary.style.webkitAnimation = '';
        }, 10);

        invoicePlayState = 'playing';
        setTimeout(function() {
          invoicePlayState = 'readyToReplay';
          console.log('invoice ended');
        }, 500);
      }
    }, false);

     // (mouseover) replay payment
    paymentAnim.addEventListener('mouseenter', function() {
      if (paymentPlayState === 'readyToReplay'){
        console.log('payment anim hover IN IF');
        paymentInterface.style.webkitAnimation = 'none';
        paymentBtn.style.webkitAnimation = 'none';
        paymentSuccess.style.webkitAnimation = 'none';

        setTimeout(function() {
          paymentInterface.style.webkitAnimation = '';
          paymentBtn.style.webkitAnimation = '';
          paymentSuccess.style.webkitAnimation = '';
        }, 10);

        // prevent user from replaying anim too soon
        paymentPlayState = 'playing';
        setTimeout(function() {
          paymentPlayState = 'readyToReplay';
          console.log('payment ended');
        }, 500);
      }
    }, false);

    // (mouseover) replay accounting
    accountingAnim.addEventListener('mouseenter', function() {
      if (accountingPlayState === 'readyToReplay'){
        console.log('acct anim hover');
        accountingBgReport.style.webkitAnimation = 'none';
        accountingBars.style.webkitAnimation = 'none';

        setTimeout(function() {
          accountingBgReport.style.webkitAnimation = '';
          accountingBars.style.webkitAnimation = '';
        }, 10);

        accountingPlayState = 'playing';
        setTimeout(function() {
          accountingPlayState = 'readyToReplay';
           console.log('acct ended');
        }, 500);
      }
    }, false);

    // (mouseover)  > replay payroll
    payrollAnim.addEventListener('mouseenter', function() {
      console.log('payroll play state = ' + payrollPlayState);
      if (payrollPlayState === 'readyToReplay'){
         console.log('payroll anim hover IN IF');
        payrollInterface.style.webkitAnimation = 'none';
        payrollReviewBtnRollover.style.webkitAnimation = 'none';
        payrollWhiteBar.style.webkitAnimation = 'none';
        payrollPayStub.style.webkitAnimation = 'none';
        payrollApproveBtn.style.webkitAnimation = 'none';
        payrollApproveBtnRollover.style.webkitAnimation = 'none';

        setTimeout(function() {
          payrollInterface.style.webkitAnimation = '';
          payrollReviewBtnRollover.style.webkitAnimation = '';
          payrollWhiteBar.style.webkitAnimation = '';
          payrollPayStub.style.webkitAnimation = '';
          payrollApproveBtn.style.webkitAnimation = '';
          payrollApproveBtnRollover.style.webkitAnimation = '';
          }, 10);
        }

        payrollPlayState = 'playing';
        setTimeout(function() {
          payrollPlayState = 'readyToReplay';
           console.log('payroll ended');
        }, 500);
    }, false);

    // play anim
    function playAnim(anim){
      switch (anim){
        case 'invoiceAnim':
          if (invoicePlayState === 'notLoaded'){
            invoiceBgLoading.className += " mod-anim__invoice__bg-loading--animate";
            invoiceLoadingBar.className += " mod-anim__invoice__loading-bar--animate";
            invoiceModern.className += " mod-anim__invoice__modern--animate";
            invoiceClassic.className += " mod-anim__invoice__classic--animate";
            invoiceContemporary.className += " mod-anim__invoice__contemporary--animate";
            invoicePlayState = 'playing';
            setTimeout(function() {
              invoicePlayState = 'readyToReplay';
               console.log('invoice 1 ended');
            }, 500);
          }
          break; 
        case 'paymentAnim':
          if (paymentPlayState === 'notLoaded'){
            paymentInterface.className += " mod-anim__payment__interface--animate";
            paymentBtn.className += " mod-anim__payment__btn-pay--animate";
            paymentSuccess.className += " mod-anim__payment__success--animate";
            paymentPlayState = 'playing';
            setTimeout(function() {
              paymentPlayState = 'readyToReplay';
               console.log('payment 1 ended');
            }, 500);
          }
          break;
        case 'accountingAnim':
          if (accountingPlayState === 'notLoaded'){
            accountingBgReport.className += " mod-anim__accounting__bg-report--animate";
            accountingBars.className += " mod-anim__accounting__bars--animate";
            accountingPlayState = 'playing';
            setTimeout(function() {
              accountingPlayState = 'readyToReplay';
               console.log('acct 1 ended');
            }, 500);
          }
          break;
        case 'payrollAnim':
          if (payrollPlayState === 'notLoaded'){
            payrollInterface.className += " mod-anim__payroll__interface--animate";
            payrollReviewBtnRollover.className += " mod-anim__payroll__btn-review-payroll-rollover--animate";
            payrollWhiteBar.className += " mod-anim__payroll__white-bar--animate";
            payrollPayStub.className += " mod-anim__payroll__pay-stub--animate";
            payrollApproveBtn.className += " mod-anim__payroll__btn-approve-payroll--animate";
            payrollApproveBtnRollover.className += " mod-anim__payroll__btn-approve-payroll-rollover--animate";
            payrollPlayState = 'playing';
            setTimeout(function() {
              payrollPlayState = 'readyToReplay';
               console.log('payroll 1 ended');
            }, 500);
          }
          break;
      }
    }

    // (helper) get element document position
    function offset(el) {
      var rect = el.getBoundingClientRect(),
      scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      return { top: rect.top + scrollTop }
    }

    // assign element position
    var scrollTopOffset = 500;
      invoicePos = offset(invoiceAnim),
      paymentPos = offset(paymentAnim),
      accountingPos = offset(accountingAnim),
      payrollPos = offset(payrollAnim);

      invoicePos = invoicePos.top - scrollTopOffset;
      paymentPos = paymentPos.top - scrollTopOffset;
      accountingPos = accountingPos.top - scrollTopOffset;
      payrollPos = payrollPos.top - scrollTopOffset;

    // check if anim is visible
    function isAnimVisible (){
      var scrollPos = window.pageYOffset;

      if (scrollPos > invoicePos && scrollPos < paymentPos){
        playAnim('invoiceAnim');
      }
      if (scrollPos > paymentPos && scrollPos < payrollPos){
        playAnim('paymentAnim');
      }
      if (scrollPos > accountingPos && scrollPos < payrollPos){
        playAnim('accountingAnim');
      }
      if (scrollPos > payrollPos){
        playAnim('payrollAnim');
      }
    }

    window.onload = isAnimVisible;
    window.onscroll = isAnimVisible;

  </script>
\$\endgroup\$
1
\$\begingroup\$

If you find yourself falling into the pattern of:

var someElement = document.getElementsByClassName('some_class')[0];

Then I would question whether you should in fact use an id on these DOM elements vs. using a class, since you are clearly only exepcting a single element for each of those classes. Selecting by ID is preferred approach in javascript to get a single element, as elements are indexed by id. They are not indexed by class name, thus requiring document traversal to find all elements that meet your condition.

I also think you need to think about breaking your application into logical components, each one with its own event listeners and animation logic. right now having single functions with complex case statements and branching logic has the bad code smell. Have you considered trying to define different javascript object classes for each of your application elements, with each object owning properties for play state, DOM elements that are related to the object, callbacks, etc.

This current approach seems very fragile from a maintenance perspective, in that if you need to make a change to one of your page components, you could unexpected impact the other components.

This code should also not be running in global namespace. At a minimum, I would think this code could be placed inside an IIFE.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.