current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 3 down vote favorite

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>
share|improve this question
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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