title: SVGs change size but won't animate on scroll transition
body: <p>I have a footer/row of SVGs I made, but they fail to animate during the transition between the 1st and 2nd Sections.  The code is not simple to debug because this needs to animate with js controlling the size of a few elements. <strong>A number of brave users have come up with solutions that work in Chrome and Firefox, but to get the credit, the solution must work in Safari, too.</strong> </p>
  
  <p>I have verified that the classes which I add during transition (<code>.fixed</code>) are indeed applied, because they are what I use change the size of the SVGs. So while the SVGs change sizes, for some reason I still cannot get the CSS transitions to animate. You can view this failure to animate in the the GIF below.</p>
  
  <h2>Footer does not animate:</h2>
  
  <p><a href="https://i.stack.imgur.com/mLM6m.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mLM6m.gif" alt="css Transition doesn&#39;t work/animate"></a></p>
  
  <p>The elements that I believe need the transition code are the SVGs themselves, which are of class <code>areaSVG</code>, because they are the ones who are changing from <code>max-height: 18vh</code> to <code>max-height: 9vh.</code> However, when I add some animation code to <code>.areaSVG</code>, it didn't work, so maybe I'm wrong. Here is the transition code I tried adding to the intial SVG (<code>.areaSVG</code>) settings that failed:</p>
  
  <pre><code>  -webkit-transition: max-height 1s;
    -moz-transition: max-height 1s;
     transition: max-height 1s;
  </code></pre>
  
  <p>A few months ago, With the help of another, more experienced coder I added a javscript function that at some point animated the SVGs. We used JS to call <code>window.requestAnimationFrame(startAnimation)</code>, but it no longer works. I commented the parts related to this out, but if you can think JS will be needed to get this to animate, feel free to fork the code pen and play with it. <strong>A suitable answer should make the animation work in Safari, Chrome, and Firefox.</strong></p>
  
  <h2>Codepens</h2>
  
  <ul>
  <li><p>This is the easiest, minimized version you should troubleshoot with because it is <em>without media queries</em> (as requested
  by <code>@Eric N</code>:<a href="http://codepen.io/ihatecoding/pen/LREOPW" rel="nofollow noreferrer">http://codepen.io/ihatecoding/pen/LREOPW</a></p></li>
  <li><p>This is the full codepen, <em>with media queries</em>: <a href="http://codepen.io/ihatecoding/pen/ALjKKz" rel="nofollow noreferrer">http://codepen.io/ihatecoding/pen/ALjKKz</a></p></li>
  </ul>
  
  <h2>Selectors</h2>
  
  <p>Selectors on the first section (on page top): </p>
  
  <ul>
  <li>The whole footer: <code>#indexFooter</code></li>
  <li>The SVG Parents: <code>.ey-col-svg</code></li>
  <li>The SVG itself: <code>.areaSVG</code></li>
  </ul>
  
  <p>Selectors on the second section (after scroll 100px down):</p>
  
  <ul>
  <li>The whole fixed footer: <code>#indexFooter.fixed</code></li>
  <li>The fixed SVG Parents: <code>.ey-col-svg.fixed</code></li>
  <li>The fixed SVG itself: <code>.areaSVG.fixed</code></li>
  </ul>
  
  <p><em>Note:when the page first loads both the SVG parent (<code>.ey-col-svg</code>) and the SVG itself (<code>.areaSVG</code>) are invisible and have the setting <code>display:none</code> to avoid a weird experience for the user.</em> </p>
  
  <p>Here is the information about the important elements in each section:</p>
  
  <h2>Big footer (on the first section)</h2>
  
  <p><strong>The inital CSS (First Section)</strong></p>
  
  <pre><code>  /* The whole footer container */
    #indexFooter {
  
     text-align: center;
      box-sizing: border-box;
      position: fixed;
      vertical-align: middle;
      bottom: 0;
      left: 0;
      z-index: 5000;
      max-height: 33.33vh;
      width: 100%;
  }
  
  
  /* The SVG container*/
  .ey-col-svg {
     display: none;
     height: auto;
      text-align: center;
      box-sizing: border-box;
      padding: 0;
  
  }
  
  /* The SVG */    
  .areaSVG {
     display: none;
     max-height: 18vh;  
     box-sizing: content-box;
     margin: 0;
  
  }
  </code></pre>
  
  <p>Next, the JS runs and then displays the elements (still on the first section):</p>
  
  <pre><code>/* The SVG container*/
  .ey-col-svg {
     display: block;    
  }
  
  
  /* The SVG*/
  .areaSVG {
     display: inline-block;    
  }
  </code></pre>
  
  <h2>Small Footer (while below the first section)</h2>
  
  <p>After leaving the first section (when the footer should be smaller and fixed)</p>
  
  <pre><code>/* The SVG when low on page*/
  .areaSVG.fixed {
      max-height: 9vh;
  }
  </code></pre>
  
  <h2>Javascript/jQuery</h2>
  
  <p>Here is the Javascript if you want to see it</p>
  
  <pre><code> $(document).ready(function() {
  
  
      var sectionIndex = 1;
      var animationName = 'indexAnimateLand';
  
  
      startAnimation();   //includes resizing background image and resizing svgs
      toggleIntroClass();  //adds css depending on section of page
  
  
  
      // if the user resizes the window, run the animation again, 
      // and resize the landing
      $(window).on('resize', function(){
  
        startAnimation();
        resizeLanding();
  
      });
  
  
  
        //sizes the landing image and the icons
        function startAnimation() {
  
  
                 $('.ey-col-svg').css('display', 'block');
                 $('.areaSVG').css('display', 'inline-block');
  
                resizeLanding(); // resize the background image
            //    window.requestAnimationFrame(startAnimation);  //animate
  
  
       }  // end start Animation
  
  
  
  
      //resizes the landing image and sets top margin for the following section
      function resizeLanding() {
  
            var $lndFooter = $('#indexFooter');
            var $bgLand = $('#section0img');
            var $contactSection = $('#section2Div');
            var winHeight = $(window).height();
            var lndFooterHeight = $lndFooter.height();
  
            bgFinalHeight = winHeight - lndFooterHeight;
            $bgLand.css("height", bgFinalHeight);
  
            $contactSection.css("margin-top", bgFinalHeight);
  
        }
  
  
  
        // changes the .css classes depending on section, 
        //(also triggers landing image resize if necessary)
        function toggleIntroClass(){
  
            var winHeight = $(window).height();
            var heightThreshold = $("#section0").offset().top;
            var heightThreshold_end  = $("#section0").offset().top + $("#section0").height();
  
            $(window).scroll(function() {
                var scroll = $(window).scrollTop();
  
  
  
            //if  user hasn't scrolled past 100px/the first section, adjust classes
            if (scroll &lt;= 100) 
                // (scroll &gt;= heightThreshold &amp;&amp; scroll &lt;  heightThreshold_end ) 
                {
                      sectionIndex = 1;
  
                     $('#newHeader').removeClass('fixed');
                      $('#nameBoxIndexTop').removeClass('fixed');
                      $('#indexIconsContainer').removeClass('fixed');
                      $('#indexIconsList').removeClass('fixed');
                      $('#linkCell').removeClass('fixed');
                      $('#indexFooter').removeClass('fixed');
                      $('.ey-text-content').removeClass('fixed');
                      $('.ey-col-svg').removeClass('fixed');
                      $('.ey-col-1').removeClass('fixed');
                      $('.ey-row-scale').removeClass('fixed');
                      $('.ey-nav-bar').removeClass('fixed');
                      $('.areaSVG').attr("class", "areaSVG");     
  
                } 
  
            //else if they have scrolled past the first hundred pixels/first section, adjust classes
                else {
                      sectionIndex = 2;
  
                      $('#newHeader').addClass('fixed');
                      $('#nameBoxIndexTop').addClass('fixed');
                      $('#indexIconsContainer').addClass('fixed');
                      $('#indexIconsList').addClass('fixed');
                      $('#linkCell').addClass('fixed');
                      $('#indexFooter').addClass('fixed');
                      $('.ey-text-content').addClass('fixed');
                      $('.ey-col-svg').addClass('fixed');
                      $('.ey-col-1').addClass('fixed');
                      $('.ey-row-scale').addClass('fixed');
                      $('.ey-nav-bar').addClass('fixed');        
                      $('.areaSVG').attr("class", "areaSVG fixed");
  
  
            }
  
                   }); //end inner scroll Function
  
  
      };//end intro Class toggle function
  
  
  
  
  
  
  });//end document ready
  </code></pre>
  
  <p>Any help would be appreciated! Thanks!</p>