javascript - online - crear animacion con svg

Los SVG cambian de tamaño pero no se animan en la transición de desplazamiento

Question

Tengo un pie de página / fila de SVG que hice, pero no se animan durante la transición entre la primera y la segunda sección. El código no es fácil de depurar porque necesita animarse con js controlando el tamaño de algunos elementos. Varios usuarios valientes han ideado soluciones que funcionan en Chrome y Firefox, pero para obtener el crédito, la solución también debe funcionar en Safari.

He verificado que las clases que agrego durante la transición ( .fixed ) se aplican de hecho, porque son las que uso y cambian el tamaño de los SVG. Así que mientras los SVG cambian de tamaño, por alguna razón todavía no puedo animar las transiciones CSS. Puede ver este error para animar en el GIF a continuación.

El pie de página no se anima:

Los elementos que creo que necesitan el código de transición son los mismos SVG, que son de la clase areaSVG , porque son los que están cambiando de max-height: 18vh a max-height: 9vh. Sin embargo, cuando agrego un código de animación a .areaSVG , no funcionó, así que tal vez me equivoque. Aquí está el código de transición que intenté agregar a la configuración .areaSVG SVG ( .areaSVG ) que falló:

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

Hace unos meses, con la ayuda de otro programador más experimentado, agregué una función javscript que en algún momento animó a los SVG. Usamos JS para llamar a window.requestAnimationFrame(startAnimation) , pero ya no funciona. Comenté las partes relacionadas con esto, pero si puedes pensar que JS será necesario para animar esto, siéntete libre de bifurcar el lápiz del código y jugar con él. Una respuesta adecuada debería hacer que la animación funcione en Safari, Chrome y Firefox.

Codepens

• Esta es la versión más sencilla y minimizada con la que debe solucionar el problema porque no tiene consultas de medios (según lo solicitado por @Eric N : http://codepen.io/ihatecoding/pen/LREOPW

• Este es el código completo, con consultas de medios : http://codepen.io/ihatecoding/pen/ALjKKz

Selectores

Selectores en la primera sección (en la parte superior de la página):

• Todo el pie de página: #indexFooter
• Los padres de SVG: .ey-col-svg
• El propio SVG: .areaSVG

Selectores en la segunda sección (después de desplazarse 100px hacia abajo):

• Todo el pie de página fijo: #indexFooter.fixed
• Los padres SVG fijos: .ey-col-svg.fixed
• El SVG fijo mismo: .areaSVG.fixed

Nota: cuando la página carga por primera vez, tanto el elemento principal SVG ( .ey-col-svg ) como el propio SVG ( .areaSVG ) son invisibles y tienen la display:none configuración display:none para evitar una experiencia extraña para el usuario.

Aquí está la información sobre los elementos importantes en cada sección:

Pie de página grande (en la primera sección)

El CSS inicial (Primera Sección)

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

}

A continuación, el JS se ejecuta y luego muestra los elementos (aún en la primera sección):

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


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

Pie de página pequeño (mientras que debajo de la primera sección)

Después de abandonar la primera sección (cuando el pie de página debe ser más pequeño y fijo)

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

Javascript / jQuery

Aquí está el Javascript si quieres verlo.

 $(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

¡Cualquier ayuda sería apreciada! ¡Gracias!

Answer 1

Haga lo siguiente en su enlace ( http://codepen.io/ihatecoding/pen/LREOPW ):

1. Agrega esta clase en tu CSS:

   .animated {transition: all .6s ease-in-out;}

2. He editado su código JS que se indica a continuación. Sustituya este bloque "si no" a partir de la línea 75 en la parte js de su enlace de código:

   if (scroll <= 100){
      sectionIndex = 1;
      $(".ey-col-1").css("transform","scale(1)");
   }else{
      sectionIndex = 2;
      $(".ey-col-1").addClass("animated").css("transform","scale(0.6)");
   }

Answer 2

Tengo una solución para varios navegadores aquí: http://codepen.io/anon/pen/EgZzxo

No es perfecto: hay algunos problemas con el cambio de ancho, pero creo que la pregunta que publicó es una respuesta. Para solucionar los otros problemas, debe mirar su css para ver si algunos elementos no están cambiando la propiedad de display , lo que puede desordenar sus transiciones. Además, la fijación de los anchos debería ayudar para que no dependan del tamaño del texto: cambiará cuando el texto se haga más pequeño y la posición de los otros elementos cambiará con él.

El principal problema que tenías era que .ey-row-scale.fixed tenía display: inline-block mientras que .ey-row.scale no lo había hecho. Eso era una cosa que estaba rompiendo la transición. La otra fue que la transición debe definirse en el elemento svg , así que en lugar de:

.indexAnimateLand {
}

Tenía que hacer:

.indexAnimateLand svg {
}

y luego funcionó. No estoy seguro del motivo exacto, pero puede deberse a que svg en línea no hereda los estilos correctamente.

También agregué transiciones a los elementos de texto y tuve que desenredar algunos márgenes !important que pusiste allí.

En general, el código podría mejorarse en algunas áreas:

• No mezcle el estilo en línea con las hojas de estilo css, ya que es muy difícil saber de dónde viene
• Trate de poner clases comunes cerca unas de otras en el archivo css, de modo que sea más fácil ver cuál es la diferencia cuando agrega una clase .fixed , por ejemplo
• Diferentes unidades sirven para diferentes propósitos. font-size no debe definirse en vh ya que es relativo al tamaño de la pantalla y puede hacer que el texto sea ilegible
• Uso !important moderación, o mejor, no use en absoluto. A menudo, el código puede ser más limpio si soluciona los problemas que lo obligan a usar !important en primer lugar!

Answer 3

http://codepen.io/stephendesjardins/pen/wzEVrQ

.ey-col-svg {
  height: auto;
  text-align: center;
  box-sizing: border-box;
  padding: 0;
  position:relative;
  height:100px;
  transition:height 0.3s;
}

.fixed .ey-col-svg {
  height:50px;
}

.fixed .ey-text-content {
  display:none;
}
/*this is the container for the  bottom svg */

.areaSVG {
  box-sizing: content-box;
  margin: 0;
  position:absolute;
  height:100%;
  width:100%;
  z-index:10;
  left:0;
  top:0;

}

Puedes modificarlo, pero aquí está lo esencial. En lugar de hacer la altura de transición en el svg, hazlo en el div padre. Además, solo agregue una altura en él y ponga su svg absoluto dentro de él. No veo por qué esto debería ser dinámico con la altura máxima. Los iconos y el texto nunca superarán más altura en este ejemplo en particular.

espero que esto ayude

Answer 4

Creo que he hecho algo bueno con la animación de su menú de navegación.

Lo primero que he hecho es limpiar el código de todo lo que parecía no utilizado ... Obviamente, debido a los múltiples intentos anteriores.

La eliminación de las clases de CSS no utilizadas y el tipo de js no utilizado "reducido" la cantidad de línea.
También cambié el nombre de algunas de las clases restantes con nombres más significativos ...
Porque estaba perdido.

Logré corregir el "efecto de salto" de la animación (comencé desde el último CodePen que publicaste en los comentarios) para que el movimiento se vea realmente suave. Lo hice sobre todo con CSS.

Los resultados

Ver en CodePen y en mi servidor.

Resultado perfecto en:

• Cromo 53
• Ópera 40
• FireFox 49

Los iconos de los ojos están un 30% debajo de la pantalla en:
(¡Pero puede parecer intencionado!) :

• Safari para Windows 5.1.7
  No pude probarlo en Safari 10 ya que no tengo ningún dispositivo Apple.
• Navegador Samsung (Samsung Galaxy S3)

Efecto realmente "sutil" de la imagen de fondo en:
(cuando la animación se dispara)

• Chrome para Android (Samsung Galaxy S3)

Malas extrañanzas en la animación:
(pero tanto los estados minimizados como los expandidos están bien)

• Explorer 11 (odio el IE)

Para los navegadores que no son compatibles con las unidades de viewport (vh, vw, etc.) como Safari para Windows y Samsung, encontré que Saabi , un polyfill de CSS, "casi" funciona correctamente. No es perfecto, pero muy cerca.

Otros navegadores admiten unidades de ventana gráfica , incluido IOS Safari 10.

Observe que hay errores lanzados por Saabi en la consola, que no solucioné.
Creo que el resultado es Saabi para no analizar completamente el archivo CSS.
Pero como casi arregla algunos navegadores sin afectar a los otros (Saabi se ejecuta solo si el navegador no admite unidades de ventana gráfica) ... vale la pena.
Lo usé en mi servidor, pero no pude en CodePen porque no encontré un CDN .

Acerca de IE ...
El problema viene de otra cosa que no (o mal) soporta ...
No me di cuenta de qué.

JSHint el js con JSHint y el CSS con CSSLint .
Hay problemas menores debido a su SVG en el verificador de CSS.
También hay en el validador de marcado W3C , debido a eso.

Le sugiero que cree PNG desde su SVG para eliminar esos errores.
Estos errores pueden ser la causa de los problemas de visualización remanentes en Safari para Windows y Samsung Browser. Saabi se enfada en algo ... Y creo que pueden ser tus SVG "Iconos de ojos".

Siéntase libre de preguntar acerca de cualquier cambio que hice.
;)

HTML :

<div id="whole">
    <div id="nav-panel" class="indexRow minimise-smooter">
        <!-- fancy icon footer -->
        <div id="nav-title" class="indexRow minimise-smooter">
            LINKS
        </div>
        <div class="nav-eyes minimise-smooter indexRow">
            <div class="indexAnimateLand indexRow">
                <div class="eye-outer-div indexRow">
                    <a class="eSVG areaAnchor indexRow" href="e.html">
                        <div class="eye-inner-div indexRow">
                            <svg class="SVG" x="0px" y="0px" viewBox="0 0 80 80" perserveAspectRatio="xMidYMid meet" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <defs>
                                    <filter id="f1" x="0" y="0" width="200%" height="200%">
                                        <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" ></feOffset>
                                        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" ></feGaussianBlur>
                                        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" ></feBlend>
                                    </filter>
                                </defs><path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
                                    M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
                                    C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" filter="url(#f1)" ></path>
                                <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
     C12.787,37.379,11.41,38.895,11.41,38.895z" ></path>
                                <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" ></ellipse>
                                <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" ></ellipse>
                                <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
     c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
     c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
     c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" ></path>
                            </svg>
                        </div>
                        <div class="eye-text indexRow minimise-smooter">LINK 1</div>
                    </a>
                </div>
                <div class="eye-outer-div indexRow">
                    <a class="eSVG areaAnchor indexRow" href="e.html">
                        <div class="eye-inner-div indexRow">
                            <svg class="SVG" x="0px" y="0px" viewBox="0 0 80 80" perserveAspectRatio="xMidYMid meet" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <defs>
                                    <filter id="f1" x="0" y="0" width="200%" height="200%">
                                        <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" ></feOffset>
                                        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" ></feGaussianBlur>
                                        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" ></feBlend>
                                    </filter>
                                </defs><path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
                                    M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
                                    C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" filter="url(#f1)" ></path>
                                <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
     C12.787,37.379,11.41,38.895,11.41,38.895z" ></path>
                                <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" ></ellipse>
                                <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" ></ellipse>
                                <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
     c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
     c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
     c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" ></path>
                            </svg>
                        </div>
                        <div class="eye-text indexRow minimise-smooter">LINK 2</div>
                    </a>
                </div>
                <div class="eye-outer-div indexRow">
                    <a class="eSVG areaAnchor indexRow" href="e.html">
                        <div class="eye-inner-div indexRow">
                            <svg class="SVG" x="0px" y="0px" viewBox="0 0 80 80" perserveAspectRatio="xMidYMid meet" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <defs>
                                    <filter id="f1" x="0" y="0" width="200%" height="200%">
                                        <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" ></feOffset>
                                        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" ></feGaussianBlur>
                                        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" ></feBlend>
                                    </filter>
                                </defs><path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
                                    M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
                                    C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" filter="url(#f1)" ></path>
                                <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
     C12.787,37.379,11.41,38.895,11.41,38.895z" ></path>
                                <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" ></ellipse>
                                <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" ></ellipse>
                                <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
     c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
     c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
     c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" ></path>
                            </svg>
                        </div>
                        <div class="eye-text indexRow minimise-smooter">LINK 3</div>
                    </a>
                </div>
                <div class="eye-outer-div indexRow">
                    <a class="eSVG areaAnchor indexRow" href="e.html">
                        <div class="eye-inner-div indexRow">
                            <svg class="SVG" x="0px" y="0px" viewBox="0 0 80 80" perserveAspectRatio="xMidYMid meet" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <defs>
                                    <filter id="f1" x="0" y="0" width="200%" height="200%">
                                        <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" ></feOffset>
                                        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" ></feGaussianBlur>
                                        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" ></feBlend>
                                    </filter>
                                </defs><path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
                                    M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
                                    C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" filter="url(#f1)" ></path>
                                <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
     C12.787,37.379,11.41,38.895,11.41,38.895z" ></path>
                                <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" ></ellipse>
                                <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" ></ellipse>
                                <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
     M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
     c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
     c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
     c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" ></path>
                            </svg>
                        </div>
                        <div class="eye-text indexRow minimise-smooter">LINK 4</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div id="fullpage">
        <article>
            <section id="section0">
                <!-- content inside of landing section  (except for icons) -->
                <div id="section0img">
                </div>
            </section>
            <section id="section2">
                <div id="section2Div">
                    <h1><a id="contact">Section 2</a></h1>
                </div>
            </section>
            <section id="section3">
                <h1>Section 3</h1>
            </section>
        </article>
    </div>
</div>

Y la parte a añadir, para utilizar el polyfill :
(justo arriba </body> )

<!-- Saabi -->
<div id="viewport-unit-tester" style="opacity:0; height:1px; width:50vw;"></div>
<script>
// test if the browser can handle viewport unit.
// If not, it load Saabi, a polyfill CSS viewport unit.
var elem = document.getElementById("viewport-unit-tester");
var width = parseInt(window.innerWidth / 2, 10);
var compStyle = parseInt((window.getComputedStyle ?
                          getComputedStyle(elem, null) :
                          elem.currentStyle).width, 10);
//console.log(width);
//console.log(compStyle);
if(!width==compStyle){
    console.log("This browser doesn''t support viewport units.");
}else{
    console.log("This browser supports viewport units.");
}

if (!Array.prototype.filter)
{
  Array.prototype.filter = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var res = new Array();
    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
      {
        var val = this[i]; // in case fun mutates this
        if (fun.call(thisp, val, i, this))
          res.push(val);
      }
    }

    return res;
  };
}
</script>
<script src="saabi/tokenizer.js"></script>
<script src="saabi/parser.js"></script>
<script src="saabi/vminpoly.js"></script>

jQuery / JavaScript :

$(document).ready(function() {
    var sectionIndex = 1;

    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();
    });


    //sizes the landing image and the icons
    function startAnimation() {
        $(''.eye-inner-div'').css(''display'', ''block'');
        $(''.SVG'').css(''display'', ''inline-block'');
    }

    // changes the .css classes depending on section, 
    //(also triggers landing image resize if necessary)
    function toggleIntroClass(){

        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            //if  user hasn''t scrolled past 100px/the first section, adjust classes
            if (scroll <= 100) {
                sectionIndex = 1;

                $(''#nav-title'').removeClass(''minimised'');
                $(''#nav-panel'').removeClass(''minimised'');
                $(''.eye-text'').removeClass(''minimised'');
                $(''.eye-inner-div'').removeClass(''minimised'');
                $(''.eye-outer-div'').removeClass(''minimised'');
                $(''.nav-eyes'').removeClass(''minimised'');
                $(''.SVG'').attr("class", "SVG");     
            } 

            //else if they have scrolled past the first hundred pixels/first section, adjust classes
            else {
                sectionIndex = 2;

                $(''#nav-title'').addClass(''minimised'');
                $(''#nav-panel'').addClass(''minimised'');
                $(''.eye-text'').addClass(''minimised'');
                $(''.eye-inner-div'').addClass(''minimised'');
                $(''.eye-outer-div'').addClass(''minimised'');
                $(''.nav-eyes'').addClass(''minimised'');        
                $(''.SVG'').attr("class", "SVG minimised");
            }
        }); //end inner scroll Function
    }//end intro Class toggle function
});//end document ready

CSS :

* {
    padding: 0;
    margin: 0;
}
html,
body {
    margin: 0;
    padding: 0;
    height: auto;
    border: none;
    font-size: 100%;
}
h1 {
    text-align: center;
    font-size: 10vh;
    font-family: sans-serif;
}

/* ------------------------------------------------------------------------------------------------------------------------- Main sections */
#section0 {
    height:100vh;
}
#section2 {
    height:100vh;
    background-color:red;
}
#section3 {
    height:100vh;
    background-color:yellow;
}
#section0img {
    background: url(''https://cdn.pbrd.co/images/cZIoMIenr.png'') no-repeat;
    -webkit-background-size: 100vw 100vh;
    -moz-background-size: 100vw 100vh;
    -o-background-size: 100vw 100vh;
    background-size: 100vw 100vh;
    height:100vh;
}

/* ------------------------------------------------------------------------------------------------------------------------- Navigation panel */
#nav-panel {
    text-align: center;
    box-sizing: border-box;
    position: fixed;
    vertical-align: middle;
    bottom: 0;
    left: 0;
    z-index: 500;
    max-height: 33.33vh;
    width: 100%;
    border-top: 0.5vh solid Gray;
    border-bottom: 0.5vh solid Gray;
}
.nav-eyes {
    width: 100% !important;
    max-height: 33.33vh;
    overflow: hidden;
    text-align: center;
}
.indexRow {
    background-color: #FBFBFA;
}
#nav-title {
    max-height: 3.33vh;
    line-height: 3.33vh;
    font-size: 3.33vh;
    padding: 2vh;
}
.areaAnchor {
    text-decoration: none !important;
    text-align: center;
}
.eye-text {
    text-rendering: optimizeLegibility;
    display: block;
    text-align: center;
    white-space: nowrap;
    max-height: 8vh;
    line-height: 3.5vh;
    color: black;
    z-index: 100;
    font-size: 4vh;
    margin: 3vh 0 .5vh 0 !important;
}

/* ------------------------------------------------------------------------------------------------------------------------- SVG icons */
.eye-outer-div {
    text-align: center !important;
    width: 20%;
    /*height: 100%;*/
    margin: 0;
    padding: 0;
    display: inline-block;
}
.eye-inner-div {
    display: none;
    height: auto;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
}
.SVG {
    display:none;
    max-height: 18vh;
    box-sizing: content-box;
    margin: 0;
    -webkit-animation: SVG 1s forwards;
    animation: SVG 1s forwards;
}
@-webkit-keyframes SVG {
    100% {
        max-height: 18vh;
    }
    0% {
        max-height: 9vh;
    }
}
@keyframes SVG {
    100% {
        max-height: 18vh;
    }
    0% {
        max-height: 9vh;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- minimised */
#nav-panel.minimised {
    border-top: 0px solid Gray;
    border-bottom: 0px solid Gray;
}
#nav-title.minimised {  /* SAME AS .eye-text.minimised */
    max-height: 0;
    font-size: 0;
    color: red;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.nav-eyes.minimised {
    max-height: 9vh;
}
.eye-outer-div.minimised {
    width: 20%;
    max-height:9vh;
    padding: 0;
    margin: 0;
    display: inline-block;
    float: none;
    /*  box-sizing: border-box; */
}
.eye-text.minimised{
    max-height: 0;
    font-size: 0;
    color: red;
    margin: 0;
    padding: 0;
    line-height:0;
}
.SVG.minimised {
    -webkit-animation: SVGFixed 1s forwards;
    animation: SVGFixed 1s forwards;
}
@-webkit-keyframes SVGFixed {
    0% {
        max-height: 18vh;
    }
    100% {
        max-height: 9vh;
    }
}
@keyframes SVGFixed {
    0% {
        max-height: 18vh;
    }
    100% {
        max-height: 9vh;
    }
}
.minimise-smooter{
    -webkit-transition-property: line-height, font-size, max-height, color, padding, margin, border-bottom, border-top;
    -moz-transition-property: line-height, font-size, max-height, color, padding, margin, border-bottom, border-top;
    -o-transition-property: line-height, font-size, max-height, color, padding, margin, border-bottom, border-top;
    transition-property: line-height, font-size, max-height, color, padding, margin, border-bottom, border-top;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}
/* ------------------------------------------------------------------------------------------------------------------------- END of minimised */

/* ------------------------------------------------------------------------------------------------------------------------- SVG formatting for the eyes*/
#circle-background {
    -moz-filter: box-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
    -webkit-filter: box-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
    filter: box-shadow(3px 3px 2px rgb(0, 0, 0, 0.5));
    fill: Gainsboro;
}
.fillDark {
    fill: #939598;
}
.fillWhite {
    fill: White;
}
.active #circle-background-e,
.active #sclera,
.active #pupil {
    fill: rgb(183, 36, 103);
}
.active #eyelid,
.active #iris {
    stroke: rgb(183, 36, 103);
}
.active #eyelid,
.active #iris {
    fill: white;
}
.active #circle-background-s {
    fill: rgb(82, 79, 161);
}
.eSVG #pupil {
    fill: Black;
}