Menu icon Foundation
Animating transitions on Tabs, Accordions

So this seems to have been asked before but I don't think we've had any satisfactory or complete solutions.

Basically, I'd like to be able to animate or create pleasant state transitions when shifting between content panels inside Tabs and Accordions. CSS transitions on .content to .content.active don't seem to fire, probably due to being so close to the show/hide event.

I'd even be OK with doing it in JavaScript but I'm not exactly an expert and the suggested ideas like adding a timer function are a bit beyond me in terms of cleanly extending the existing code ( I don't want to touch the stock JS files).

So, if anyone has some step-by-step suggestions, I'd be all ears.

animationui

So this seems to have been asked before but I don't think we've had any satisfactory or complete solutions.

Basically, I'd like to be able to animate or create pleasant state transitions when shifting between content panels inside Tabs and Accordions. CSS transitions on .content to .content.active don't seem to fire, probably due to being so close to the show/hide event.

I'd even be OK with doing it in JavaScript but I'm not exactly an expert and the suggested ideas like adding a timer function are a bit beyond me in terms of cleanly extending the existing code ( I don't want to touch the stock JS files).

So, if anyone has some step-by-step suggestions, I'd be all ears.

Rafi Benkual over 4 years ago

You can use CSS transitions on the accordions. The thing is that it cannot animate to height: auto, unless you use some JS to calculate the content height.

You will need to set a max-height for the content to use CSS only.

http://codepen.io/jonmunson/pen/rapJwN // using jQuery animations
http://codepen.io/rafibomb/pen/KwBmKz // transition: ease
http://codepen.io/sandwich/pen/vEXbyx // transition: ease with max-height

Nick Caldwell over 4 years ago

Those are some damn fine examples, Rafi. Thanks! I take it Tabs shouldn't pose any additional complications on top of that? I should be able to adapt what I see for some of the other constructs.

Marc McGee over 4 years ago

Hey Nick:
There was a variation from Hassan that I found that works very well. Some, while animating the opening, did not bring the content up into view on the screen. The user would then have to scroll down.

Hassan's variation animates the open and then smooth scrolls the content up into view.

 <script>
$(document).foundation();
$(".accordion").on("click", "dd:not(.active)", function (original) {
original = $(this);
  $("dd.active").find(".content").slideUp("800", function(){

  });
  $(this).find(".content").slideToggle("800", function() {
    $('html,body').animate({
          scrollTop: original.offset().top
        }, 1000);
        original.addClass("active");
        $(".accordion dd.active").not(original).removeClass("active");
  });
  });
</script>';

Nick Caldwell over 4 years ago

These are very good, keep them coming, you guys.

I have a variant that I'm working on with tabs, but it's not going terribly well.

http://codepen.io/Rocketpilot/pen/7fa21b71422f6a824d6e67a26b93d8ea

I've made life a bit harder for myself by putting the tab content area into a different column, to achieve a design I'm working on. The idea will be to have existing content that hides out of the way when the user clicks on a tab.

Amazing Sey almost 3 years ago

Thanks Rafi,

With your answers on this and other post on motion ui duration and timing, I was able to combine tabs with motion ui animation for a project I'm working on using foundation 6.3.

Here is the source code (should someone find it useful). It's working well but would be glad if there's a better or fast way around.

Thanks

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Finance Products Tabs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />

</head> 
<body>
<h1 style="padding:6rem 0; text-align:center;">Tabs Animation with Motion UI</h1>
<div id="finance-products"  style="margin-top:5rem; overflow:hidden;">
<div class="row collapse">
            <div class="medium-3 columns">
              <ul class="tabs vertical" id="main-pdt-cat-tabs" data-tabs>
                <li class="tabs-title is-active"><a href="#panel1v">Personal Banking</a></li>
                <li class="tabs-title"><a href="#panel2v">Business Banking</a></li>
                <li class="tabs-title"><a href="#panel3v">Insurance &amp; Investment</a></li>
                <li class="tabs-title"><a href="#panel4v">Payment Services</a></li>
              </ul>
              </div>
            <div class="medium-9 columns">
            <div class="tabs-content vertical" data-tabs-content="main-pdt-cat-tabs">
              <div class="tabs-panel is-active slow bounceIn ease-in-out" id="panel1v">
                  <div class="content">
                    <h2>Personal Banking</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                  </div>
              </div>
              <div class="tabs-panel slow bounceIn ease-in-out" id="panel2v">
                  <div class="content">
                    <h2>Business Banking</h2>
                    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                  </div>
              </div>
              <div class="tabs-panel slow bounceIn ease-in-out" id="panel3v">
                  <div class="content">
                    <h2>Insurance &amp; Investment</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                  </div>
              </div>
              <div class="tabs-panel slow bounceIn ease-in-out" id="panel4v">
                <h2>Payment Services</h2>
                <div class="content">
                <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>

            </div>
            </div>
      </div>
</div>      
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/plugins/foundation.util.motion.min.js"></script>
  
  <script type="text/javascript">
  
    $(document).foundation();
    
    jQuery(document).ready(function($){
               
        $('#main-pdt-cat-tabs').on('change.zf.tabs', function() {
              var activeTab =  $(this).find('.is-active a').attr('href');
              //console.log(activeTab);
              Foundation.Motion.animateIn($(''+activeTab), 'slide-in-down');
          });
  });
  </script>
 </body>
</html>

 

Adam Christianson over 2 years ago

The solution here from @Amazing Set is what worked for me though for me I had an issue where the animation appears was if it was sliding in from the top of the screen. I fixed it by adding an

overflow: hidden;

to the CSS for the wrapper class of the panels. So in this example

.tabs-content