SVGs change size but won't animate on scroll transition

Question

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. 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.

I have verified that the classes which I add during transition (.fixed) 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.

Footer does not animate:

The elements that I believe need the transition code are the SVGs themselves, which are of class areaSVG, because they are the ones who are changing from max-height: 18vh to max-height: 9vh. However, when I add some animation code to .areaSVG, it didn't work, so maybe I'm wrong. Here is the transition code I tried adding to the intial SVG (.areaSVG) settings that failed:

  -webkit-transition: max-height 1s;
  -moz-transition: max-height 1s;
   transition: max-height 1s;

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 window.requestAnimationFrame(startAnimation), 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. A suitable answer should make the animation work in Safari, Chrome, and Firefox.

Codepens

• This is the easiest, minimized version you should troubleshoot with because it is without media queries (as requested by @Eric N:http://codepen.io/ihatecoding/pen/LREOPW

• This is the full codepen, with media queries: http://codepen.io/ihatecoding/pen/ALjKKz

Selectors

Selectors on the first section (on page top):

• The whole footer: #indexFooter
• The SVG Parents: .ey-col-svg
• The SVG itself: .areaSVG

Selectors on the second section (after scroll 100px down):

• The whole fixed footer: #indexFooter.fixed
• The fixed SVG Parents: .ey-col-svg.fixed
• The fixed SVG itself: .areaSVG.fixed

Note:when the page first loads both the SVG parent (.ey-col-svg) and the SVG itself (.areaSVG) are invisible and have the setting display:none to avoid a weird experience for the user.

Here is the information about the important elements in each section:

Big footer (on the first section)

The inital CSS (First Section)

  /* 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;

}

Next, the JS runs and then displays the elements (still on the first section):

/* The SVG container*/
.ey-col-svg {
   display: block;    
}


/* The SVG*/
.areaSVG {
   display: inline-block;    
}

Small Footer (while below the first section)

After leaving the first section (when the footer should be smaller and fixed)

/* The SVG when low on page*/
.areaSVG.fixed {
    max-height: 9vh;
}

Javascript/jQuery

Here is the Javascript if you want to see it

 $(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 <= 100) 
              // (scroll >= heightThreshold && scroll <  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

Any help would be appreciated! Thanks!

Answer 1

I have a cross-browser solution here: http://codepen.io/anon/pen/EgZzxo

It is not perfect: there are some issues with changing width, but the question you posted is answered I believe. To fix the other issues you have to look at your css to see if some elements are not changing the display property - that may mess up with your transitions. Also fixing the widths should help so they are not dependent on the text size - it will change when the text gets smaller so the position of the other elements will change with it.

The main problem you had was that .ey-row-scale.fixed had display: inline-block while .ey-row.scale hadn't. That was one thing that was breaking the transition. The other was that the transition has to be defined on the svg element, so instead of:

.indexAnimateLand {
}

I had to do:

.indexAnimateLand svg {
}

and then it worked. Not sure exactly why, but it may be down to the inline svg not inherting the styles correctly.

I also added transitions to the text elements and had to untangle some !important margins you put in there.

In general the code could be improved in a few areas:

• Don't mix inline styling with css stylesheets, as it is very difficult to know what comes from where
• Try to put common classes close to each other in the css file, so it's easier to see what is the difference when you add a .fixed class for example
• Different units serve different purposes. font-size shouldn't be defined in vh as that's relative to screen size and can make the text unreadable
• Use !important sparingly, or better, don't use at all. Oftentimes the code can be cleaner if you fix the problems that force you to use !important in the first place