Añadir a la section padre una clase

Como por ejemplo:

#text-animation

Y meter este CSS:

#text-animation svg{
	min-height: 300px;	
	overflow: visible;
}

Cómo crear el SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="160px" viewBox="0 0 1098.72 89.55">
    <path id="curve" fill="transparent" d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8-61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19"></path>
    <text width="100%" style="transform:translate3d(0,0,0);">
        <textPath style="transform:translate3d(0,0,0);" startOffset="1200px" id="text-path" alignment-baseline="top" xlink:href="#curve"> Nuestro texto </textPath>
    </text>
</svg>

En el campo d= añadiremos las coordenadas de nuestros trazado.

Añadir texto en el campo textpath.

Establecer tamaño de texto

También podemos añadir una clase al icono para establecer un tamaño de texto predeterminado: h1, h2…

Añadir JS

Movimiento de derecha a izquierda según se hace scroll hacia abajo.

jQuery(function() {

const textPath = document.querySelector('#text-path');

const h = document.documentElement, 
      b = document.body,
      st = 'scrollTop',
      sh = 'scrollHeight';

document.addEventListener('scroll', e => {
  let percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
  textPath.setAttribute('startOffset', (-percent * 40) + 1200)
});

});

Para invertir la animación invertir los siguientes valores:

textPath.setAttribute('startOffset', (percent * 40) - 1200)

Fuente: https://css-tricks.com/moving-text-on-a-curved-path/

Como personalizar el fondo del Full nav
Anterior
Configurar Outlook en el móvil
Siguiente