Storytelling para TYPO3

Memorias anuales y lanzamientos de producto necesitan algo más que texto e imagen

Las páginas estáticas con bloques de texto largos funcionan para documentación y artículos de blog. Pero las memorias anuales, los lanzamientos de producto y las historias corporativas necesitan un formato que guíe al visitante a través de una narrativa. El scrollytelling, es decir, contar una historia mediante la interacción de scroll, se ha establecido como el formato que se sitúa entre el texto estático y el vídeo producido. La extensión Storytelling para TYPO3 incorpora parallax scrolling, bloques de contenido animados y animaciones disparadas por scroll directamente al CMS, sin necesidad de que un servicio externo o una agencia programe una pieza única por cada página.

La ventaja frente al desarrollo a medida: los redactores pueden mantener los contenidos en el backend de TYPO3, reordenar bloques y configurar animaciones sin involucrar al desarrollador.

Los escenarios típicos son memorias anuales, lanzamientos de producto y landings de campaña

El escenario más prominente son las memorias anuales digitales. Empresas, fundaciones y ONGs publican cada vez más sus cifras de cierre como historia web interactiva en lugar de como PDF. Una memoria anual en formato scrollytelling muestra en la primera sección la cifra principal (facturación, volumen de donaciones, número de socios), que se anima al hacer scroll. En la segunda sección aparecen gráficos con cifras comparativas respecto al año anterior. En la tercera, retratos y citas cuentan la historia detrás de los números. Toda la historia es una única página por la que el visitante hace scroll.

Un segundo escenario son las presentaciones de producto en el ámbito B2B. Un fabricante de maquinaria presenta una nueva línea de producción. Al hacer scroll, el renderizado 3D de la máquina rota, los datos técnicos aparecen y las animaciones muestran el proceso de producción. No es un vídeo (sin carga, sin buffering), sino una animación controlada por scroll que el visitante recorre a su propio ritmo.

Tercer escenario: landings de campaña. Una organización benéfica muestra el recorrido de una donación: desde el clic en el botón de donar, pasando por la selección del proyecto, hasta el informe del país de destino. Cada sección de scroll contiene una foto, un texto breve y una animación que visualiza el avance.

La arquitectura técnica renderiza secciones como bloques de contenido controlados por scroll

La extensión define un tipo propio de elemento de contenido, “Storytelling”, que se compone de secciones. Cada sección es un registro de backend con campos para titular, texto, imagen/vídeo (FAL), color de fondo, tipo de animación y disparador de scroll. Las secciones se ordenan en el backend y forman en conjunto la historia de scroll.

En el frontend, cada sección renderiza un bloque propio que ocupa todo el viewport. Las animaciones se disparan mediante transiciones CSS e IntersectionObserver: cuando una sección entra en el área visible, arranca la animación configurada (Fade-In, Slide-Left, Zoom, contador). Los efectos parallax desplazan las imágenes de fondo más despacio que el primer plano, creando sensación de profundidad.

La extensión trae un conjunto de animaciones predefinidas. Las animaciones personalizadas pueden añadirse mediante clases CSS seleccionables en el backend como tipo de animación. La base JavaScript es mínima: sin framework, solo IntersectionObserver nativo y requestAnimationFrame. Esto mantiene el tamaño del bundle por debajo de 20 KB.

Para el rendimiento es decisivo que las imágenes se carguen de forma perezosa. Una memoria de scrollytelling con 15 secciones y una imagen de alta resolución por sección genera sin lazy loading entre 30 y 50 MB en peticiones. Con lazy loading, el navegador solo carga la sección visible y la siguiente.

Los problemas habituales afectan al rendimiento en móvil y a la accesibilidad

El mayor problema del scrollytelling en dispositivos móviles es el rendimiento. Los efectos parallax, fluidos en escritorio, sufren tirones en smartphones antiguos. El motivo: los navegadores móviles procesan los eventos de scroll de forma distinta a los de escritorio y estrangulan requestAnimationFrame en segundo plano. La solución: desactivar parallax en viewports móviles y sustituirlo por animaciones Fade-In sencillas. La extensión debería permitir configurar mediante TypoScript qué animaciones están activas en cada breakpoint.

Segundo problema: accesibilidad (WCAG 2.1). Las animaciones controladas por scroll resultan problemáticas para usuarios con trastornos vestibulares (mareo, náuseas ante el movimiento). Se debe respetar el CSS prefers-reduced-motion. Con la preferencia de reducir el movimiento activada, la extensión debería desactivar todas las animaciones y mostrar los contenidos como bloques estáticos. No todas las extensiones de storytelling lo implementan correctamente.

Tercer tema: SEO. Google puede rastrear animaciones basadas en JavaScript, pero el contenido debe ser accesible también sin JavaScript. Las secciones deben renderizarse como bloques HTML regulares, no como contenedores vacíos que solo se rellenan vía JavaScript. La extensión debería seguir un enfoque de mejora progresiva: primero el contenido, después la animación.

TYPO3 v12 está soportado, v13 exige actualizar el registro de elementos de contenido

Existen extensiones de scrollytelling para TYPO3 en distintas variantes de distintos proveedores. La compatibilidad con v12 está garantizada en las extensiones mantenidas activamente. Para v13 hace falta actualizar el registro de elementos de contenido (NewContentElementWizard) y la configuración TCA, porque v13 ha ajustado la configuración de elementos de contenido basada en FlexForm. En los nuevos proyectos de scrollytelling, Gosign apuesta por una arquitectura que separa la lógica de animación como módulo JavaScript independiente de la integración TYPO3, para que en futuros upgrades solo haya que adaptar la capa TYPO3.