Storytelling para TYPO3

Relatórios anuais e lançamentos de produto pedem mais do que texto e imagem

Páginas estáticas com longos blocos de texto funcionam bem para documentação e artigos de blog. Relatórios anuais, lançamentos de produto e a história de uma empresa, porém, pedem um formato que conduza o visitante por uma narrativa. O scrollytelling, ou seja, contar uma história pela interação de rolagem, se firmou como o formato que fica entre o texto estático e o vídeo de produção cara. A extensão Storytelling para TYPO3 leva rolagem com parallax, blocos de conteúdo animados e animações disparadas pela rolagem diretamente para o CMS, sem que um serviço externo ou uma agência tenha de programar uma peça única para cada página.

A vantagem sobre um desenvolvimento sob medida: a equipe editorial mantém o conteúdo no backend do TYPO3, reordena blocos e configura animações sem depender do desenvolvedor.

Relatório anual digital, lançamento B2B e página de campanha são os casos clássicos

O cenário mais visível é o relatório anual digital. Empresas, fundações e ONGs publicam cada vez mais seus números como web story interativa em vez de PDF. Um relatório anual em scrollytelling mostra na primeira seção o número principal (faturamento, volume de doações, número de associados), que sobe animado enquanto o visitante rola a página. Na segunda seção aparecem gráficos com a comparação com o ano anterior. Na terceira, retratos e depoimentos contam a história por trás dos números. Tudo cabe numa única página, que o visitante percorre rolando.

O segundo cenário são apresentações de produto no B2B. Um fabricante de máquinas apresenta uma nova linha de produção. Durante a rolagem, a renderização 3D da máquina gira, os dados técnicos surgem na tela e animações mostram o processo produtivo. Não é um vídeo (nada de carregamento ou buffering), e sim uma animação controlada pela rolagem, que o visitante percorre no próprio ritmo.

Terceiro cenário: landing pages de campanha. Uma organização humanitária mostra o caminho de uma doação, do clique no botão de doar e da escolha do projeto até o relato que chega do país de destino. Cada trecho da rolagem traz uma foto, um texto curto e uma animação que torna o avanço visível.

Cada seção é um registro no backend e vira um bloco de tela inteira acionado pela rolagem

A extensão define um tipo próprio de elemento de conteúdo, “Storytelling”, composto de seções. Cada seção é um registro de backend com campos para título, texto, imagem ou vídeo (FAL), cor de fundo, tipo de animação e gatilho de rolagem. As seções são ordenadas no backend e, juntas, formam a história.

No frontend, cada seção renderiza um bloco que ocupa a viewport inteira. As animações são disparadas por transições CSS e pelo IntersectionObserver: quando uma seção entra na área visível, começa a animação configurada (fade-in, slide-left, zoom, contador). Os efeitos de parallax movem as imagens de fundo mais devagar que o primeiro plano, o que cria sensação de profundidade.

A extensão traz um conjunto de animações predefinidas. Animações próprias podem ser acrescentadas por classes CSS, que aparecem no backend como tipos de animação selecionáveis. A base de JavaScript é mínima: nenhum framework, apenas IntersectionObserver e requestAnimationFrame nativos. Isso mantém o bundle abaixo de 20 KB.

Para a performance, é decisivo carregar as imagens com lazy loading. Um relatório em scrollytelling com 15 seções, cada uma com uma imagem em alta resolução, gera de 30 a 50 MB em requisições sem lazy loading. Com lazy loading, o navegador carrega só a seção visível e a seguinte.

No celular e na acessibilidade, o scrollytelling costuma tropeçar

O maior problema do scrollytelling em dispositivos móveis é a performance. Efeitos de parallax que rodam suaves no desktop perdem fluidez em smartphones mais antigos. O motivo: navegadores móveis tratam os eventos de rolagem de outra forma e reduzem o ritmo do requestAnimationFrame em segundo plano. A solução: desativar o parallax nas viewports móveis e trocá-lo por animações simples de fade-in. A extensão deve permitir configurar via TypoScript quais animações ficam ativas em quais breakpoints.

Segundo problema: acessibilidade (WCAG 2.1). Animações controladas pela rolagem são um problema para pessoas com distúrbios vestibulares (tontura, enjoo com movimento). A preferência CSS prefers-reduced-motion precisa ser respeitada. Com a redução de movimento ativada no sistema, a extensão deve desligar todas as animações e mostrar o conteúdo como blocos estáticos. Nem todas as extensões de storytelling fazem isso corretamente.

Terceiro ponto: SEO. O Google consegue rastrear animações baseadas em JavaScript, mas o conteúdo precisa estar acessível também sem JavaScript. As seções têm de ser renderizadas como blocos HTML comuns, e não como contêineres vazios que o JavaScript preenche depois. A extensão deve seguir o princípio de progressive enhancement: primeiro o conteúdo, depois a animação.

O TYPO3 v12 é suportado, e o v13 exige atualizar o registro dos elementos de conteúdo

Existem extensões de scrollytelling para TYPO3 em diversas variantes, de diversos fornecedores. As extensões mantidas ativamente já são compatíveis com o v12. Para o v13, é preciso atualizar o registro dos elementos de conteúdo (NewContentElementWizard) e a configuração TCA, porque o v13 preenche o assistente de novos elementos de conteúdo a partir do TCA e só lê FlexForms sem o wrapper <TCEforms>. Em novos projetos de scrollytelling, a Gosign adota uma arquitetura que separa a lógica de animação, como módulo JavaScript independente, da integração com o TYPO3. Assim, nos upgrades futuros, só a camada do TYPO3 precisa de ajuste.