Menu icon Foundation
Off-canvas toggle not working with ease-in feature inserted

I'm building a site and I'm using the off-canvas feature, however, the off-canvas toggle stopped working once I added an ease-in effect for the elements on my site using a document I downloaded online from http://lauren.github.io/ease-in/,

when I put it on my code, the off-canvas toggle stopped working

this how my code looks like:

    <script src="js/ease-in.min.js"></script>
     
        <script>
        easeIn(document.body.children, 2);
      </script>
      
      <script src="js/vendor/jquery.js"></script>
      <script src="js/foundation.min.js"></script>
      <script>
      $(document).foundation();
      </script>
            

         

And this is the css for the ease-in feature:

.fade-in{
  opacity:0;
  -webkit-transition: opacity .5s ease-in-out;
     -moz-transition: opacity .5s ease-in-out;
       -o-transition: opacity .5s ease-in-out;
          transition: opacity .5s ease-in-out;
}

.visible {
  opacity:1;
  -webkit-transition: opacity .5s ease-in-out;
     -moz-transition: opacity .5s ease-in-out;
       -o-transition: opacity .5s ease-in-out;
          transition: opacity .5s ease-in-out;
}
            

         

How can I make both features work without sacrificing one or the other?

off-canvastogglenot workingease-inproblem

I'm building a site and I'm using the off-canvas feature, however, the off-canvas toggle stopped working once I added an ease-in effect for the elements on my site using a document I downloaded online from http://lauren.github.io/ease-in/,

when I put it on my code, the off-canvas toggle stopped working

this how my code looks like:

    <script src="js/ease-in.min.js"></script>
     
        <script>
        easeIn(document.body.children, 2);
      </script>
      
      <script src="js/vendor/jquery.js"></script>
      <script src="js/foundation.min.js"></script>
      <script>
      $(document).foundation();
      </script>
            

         

And this is the css for the ease-in feature:

.fade-in{
  opacity:0;
  -webkit-transition: opacity .5s ease-in-out;
     -moz-transition: opacity .5s ease-in-out;
       -o-transition: opacity .5s ease-in-out;
          transition: opacity .5s ease-in-out;
}

.visible {
  opacity:1;
  -webkit-transition: opacity .5s ease-in-out;
     -moz-transition: opacity .5s ease-in-out;
       -o-transition: opacity .5s ease-in-out;
          transition: opacity .5s ease-in-out;
}
            

         

How can I make both features work without sacrificing one or the other?

Rafi Benkual over 4 years ago

Hmm, I just did this the other day.

Is this what you're after? - http://codepen.io/rafibomb/pen/pJdmaP