As transições têm inúmeros benefícios para os usuários, inclusive ajudam a mantê-los em contexto e reduzir a percepção de latência. Os desenvolvedores querem criar transições perfeitas entre as páginas, ajudando a aumentar o engajamento dos usuários com o site.
No entanto, ativar transições de estado era muito difícil, porque exigia que os desenvolvedores gerenciassem estados de dois elementos diferentes. Até mesmo algo como um simples cross-fade envolve a presença dos dois estados ao mesmo tempo. Isso apresenta desafios de usabilidade, como lidar com interações adicionais no elemento de saída. Para usuários de dispositivos assistivos, há um período em que os estados antes e depois estão no DOM ao mesmo tempo. Além disso, as coisas podem se mover pela árvore de forma agradável visualmente, mas podem facilmente fazer com que a posição de leitura e o foco sejam perdidos.
Lançada no Chrome 111, a API View Transitions permite a criação de transições suaves e simples entre as páginas. Ele permite que você faça a mudança do DOM sem qualquer sobreposição entre os estados e tenha uma animação de transição entre os estados usando visualizações instantâneas.
Você deve estar se perguntando: “Qual é a facilidade de implementação?”. Quais tipos de casos de uso existem? Como outros desenvolvedores usam as transições de visualização?
Este artigo mostra a implementação de transições de visualização em quatro sites diferentes: RedBus (viagens), CyberAgent (editora de notícias/blog), Nykaa (e-commerce) e PolicyBazaar (seguros) e como os sites se beneficiaram de diferentes formas usando a API View Transitions.
redBus
A redBus, parte do grupo MakeMyTrip, é um site de reservas e passagens de ônibus com sede em Bangalore, Índia, com presença em diferentes regiões do mundo. Ele foi um dos primeiros sites a implementar uma experiência usando a API View Transitions.
Por que o Redbus implementou transições de visualização?
A equipe da redBus acredita firmemente no fornecimento de uma experiência na Web unificada, semelhante a um aplicativo, o mais próxima possível de seus aplicativos nativos. Na verdade, ela implementou várias soluções personalizadas ao longo dos anos. Por exemplo, eles lançaram animações personalizadas com base em JavaScript e CSS para as transições de página antes mesmo do desenvolvimento da API View Transitions. No entanto, isso significava que eles precisavam lidar com o gerenciamento de desempenho em segmentos mais baixos de rede e dispositivos, levando a uma experiência diferencial com uma estratégia de carregamento adaptativo em vigor.
O redBus usou transições de visualização para várias jornadas do usuário. Por exemplo, na seção de autoajuda do app para dispositivos móveis, que abria páginas da Web em guias personalizadas do Chrome, e no funil de reserva de passagens de ônibus, em que os usuários vão da página de informações do inventário para a página de pagamentos. No último caso, as transições de visualização deixaram a navegação entre as páginas mais suave e resultaram em um aumento na taxa de conversão. Isso foi resultado de uma melhor experiência do usuário e melhor desempenho percebido enquanto as operações pesadas, como a busca do inventário mais atualizado disponíveis, eram executadas.
Detalhes técnicos da implementação
A redBus usa React e EJS como conjunto de tecnologias de front-end, com uma combinação de SPAs e MPAs em diferentes jornadas. O exemplo de código abaixo mostra como as transições de visualização são usadas:
/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
if(document.startViewTransition) {
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
})
} else {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
}
};
/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
if(document.startViewTransition) {
document.documentElement.classList.add('back-transition');
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.goBack() : history.back();
})
viewTransition.finished.finally(() => {
document.documentElement.classList.remove('back-transition');
})
} else {
reactHistory ? reactHistory.goBack() : history.back();
}
};
No CSS a seguir, slide-to-right, slide-to-left, slide-from-right e slide-from-left são frames-chave de animação CSS.
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
Impacto nos negócios
A redBus optou por implementar transições de visualização junto com os esforços de melhoria da INP em todo o site, o que levou a 7% mais vendas. Amit Kumar, gerente de engenharia sênior da redBus, disse que as transições de visualização são realmente incríveis para quem realmente quer uma melhor experiência do usuário e quer menos sobrecarga de manutenção.
Conduzimos sessões abrangentes de feedback dos usuários, incorporando insights valiosos de um grupo diversificado de usuários. Nosso entendimento da nossa base de usuários (ônibus e trens) e as necessidades deles, combinado com nossa experiência, nos levou a acreditar que esse recurso agregará um valor significativo desde o início, sem a necessidade de testes A/B. As transições de visualização são uma etapa para preencher a lacuna entre o app e a Web com uma experiência de navegação suave.
Anoop Menon, CTO da redBus
CyberAgent
A CyberAgent é uma empresa de TI com sede no Japão que oferece muitos serviços on-line, incluindo publicação de blogs e notícias.
Por que a CyberAgent implementou transições de visualização?
A CyberAgent considerou usar animações em CSS ou uma estrutura para implementar transições animadas no passado, mas estava preocupada com o baixo desempenho na renderização de DOM e capacidade de manutenção do código. Quando o Chrome adicionou suporte à API View transições, eles ficaram entusiasmados em usá-la para criar transições de página envolventes que superam esses desafios.
A CyberAgent implementou transições de visualização entre a lista de blogs e a página do blog. Aqui, observe como eles adicionaram a transição do elemento à imagem principal. Acesse o site da empresa e veja como ela funciona hoje mesmo.
Ela também usou consultas de mídia para criar diferentes experiências de animação para dispositivos distintos. Em páginas para dispositivos móveis, eles incluíam transições de elementos, mas esse efeito tinha muito movimento para computadores.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Detalhes técnicos da implementação
A CyberAgent usa o Next.js para criar o SPA. O exemplo de código a seguir demonstra como eles usam a API View Transition.
export const usePageTransition = () => {
const router = useRouter();
const defferedRef = useRef<Deferred | null>(null);
useEffect(() => {
const handleRouteChangeComplete = () => {
defferedRef.current?.resolve();
};
const handleRouteChangeStart = (url: string) => {
if (!("startViewTransition" in document)) return;
if (router.asPath === url) return;
const deffered = new Deferred();
defferedRef.current = deffered;
(document as Document).startViewTransition(async () => {
await deffered.promise;
});
};
router.events.on("routeChangeStart", handleRouteChangeStart);
router.events.on("routeChangeComplete", handleRouteChangeComplete);
return () => {
router.events.off("routeChangeStart", handleRouteChangeStart);
router.events.off("routeChangeComplete", handleRouteChangeComplete);
};
}, [router.asPath]);
};
Confira mais alguns exemplos de código do Next.js.
Acessar transições para MPA com tecnologia de pré-renderização
A CyberAgent também testou nossa nova API View Transitions for Multiple Page Apps (MPA) (atualmente sob a flag chrome://flags/#view-transition-on-navigation) em um serviço chamado Ameba News, que é um portal de notícias.
As transições de visualização foram usadas em dois lugares: o primeiro ocorre ao mudar as categorias das notícias, mostradas no vídeo a seguir.
O segundo fica entre a página de destaque de notícias, em que um trecho do conteúdo é exibido, e quando o usuário clica em Ver mais detalhes, o restante do artigo é mostrado.
O ponto interessante é que eles só adicionaram animação à parte que mudará após o clique no botão. Esse pequeno ajuste no design da animação faz com que a página da MPA pareça um SPA do ponto de vista do usuário, com apenas o novo conteúdo sendo animado:
Veja como eles fizeram isso: atribuíram um view-transition-name diferente às diferentes partes da página. Por exemplo, atribuíram um view-transition-name à parte de cima do artigo e outro à parte de baixo, sem adicionar animação à parte de cima.
::view-transition-old(root) {
animation:
var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
}
::view-transition-new(root) {
animation:
var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}
Outra coisa interessante sobre o uso da API de transições de visualização pela CyberAgent é que ela usou o link rápido para implementar facilmente regras de pré-renderização na página de detalhes. Confira um exemplo de código:
import { prerender } from ‘https://.../quicklink.mjs’;
window.addEventListener('load', () => {
const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
if (!match) return;
const [_, dirname, entryId] = match;
prerender(`/${dirname}/${entryId}/`);
});
Saiba mais sobre a implementação de links rápidos neste artigo.
Depoimento
Kazunari Hara, líder de tecnologia do serviço da Ameba na CyberAgent, disse que as transições de visualização podem ter um impacto significativo nos negócios por dois motivos.
Primeiro, eles orientam os usuários na página. As transições de visualização permitem focar visualmente os usuários na mensagem mais importante e os ajudam a aproveitar a página da Web ao máximo. Além disso, elas melhoram e enfatizam a marca com animação. A CyberAgent tem um design de animação designado para comunicar a marca. Com as transições de visualização, é possível implementar essa experiência de marca sem adicionar o custo de manutenção de bibliotecas externas.
View Transitions é uma das minhas APIs favoritas. A capacidade de adicionar animações como um recurso padrão do navegador facilita a implementação e manutenção das transições de visualização em comparação com outras soluções dependentes de bibliotecas. Estamos ansiosos para implementar transições de visualização em mais serviços para divulgar nossa marca.
Kazunari Hara, CTO da Ameba
Nykaa
A Nykaa é a maior plataforma de e-commerce de moda e beleza da Índia. O objetivo é que a experiência na Web para dispositivos móveis seja a mais próxima possível do app nativo. Ao tentar implementar animações de transição anteriormente, eles tiveram dificuldade para escrever um JavaScript personalizado complexo. Isso também afetou ligeiramente a performance do site.
Por que Nykaa implementou transições de visualização?
Com a chegada das transições de visualização, a equipe da Nykaa viu uma oportunidade em que essas transições estavam disponíveis de forma nativa, o que significava que a UX das transições de página poderia ser melhorada significativamente sem custo para o desempenho. Nykaa está usando intensamente as transições de visualização para fazer a transição da página de detalhes do produto para a página de informações do produto.
Detalhes técnicos da implementação
A Nykaa usou o React e Emotion para criar o SPA. Mais exemplos de código sobre como usar transições de visualização com o React podem ser encontrados aqui.
if (document.startViewTransition) {
document.startViewTransition(() => {
history.push(productUrl);
});
} else {
history.push(productUrl);
}
const fadeIn = keyframes`
from { opacity: 0; }
`;
const fadeOut = keyframes`
to { opacity: 0; }
`;
const slideFromRight = keyframes`
from { transform: translateX(300px); }
`;
const slideToLeft = keyframes`
to { transform: translateX(-300px); }
`;
const slideToRight = keyframes`
to { transform: translateX(300px); }
`;
const slideFromLeft = keyframes`
from { transform: translateX(-300px); }
`
CSS para animação da gaveta lateral:
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}
::view-transition-new(root) {
animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}
.back-transition {
display: inherit;
}
.back-transition::view-transition-old(root) {
animation-name: fade-out, ${slideToRight};
}
.back-transition::view-transition-new(root) {
animation-name: fade-in, ${slideFromLeft};
}
Depoimento
Sunit Jindal, chefe de apps da Nykaa, disse que o maior benefício da transição de visualização foi a "Percepção da velocidade". O Nykaa usou os efeitos de brilho para aguardar o carregamento do conteúdo do back-end, mas descobriu que mostrar esse efeito não dava aos usuários quanto tempo eles teriam que esperar pelo carregamento do conteúdo. Com as transições de visualização, a própria transição deu aos usuários a noção de que "algo está prestes a acontecer", o que tornava a espera menos trabalhosa.
A Nykaa estava muito animada com a UX recém-aprimorada da página da Web com transições de visualização e está pronta para implementar essas transições em outras páginas. Veja o que o vice-presidente de design da empresa disse:
Temos o compromisso de implementar transições de visualização em todos os próximos recursos quando fizer sentido. Algumas áreas já foram identificadas e a equipe está investindo ativamente nelas.
Krishna R V, vice-presidente de design
PolicyBazaar
Com sede em Gurgaon, a PolicyBazaar é o maior agregador de seguros e empresa multinacional de tecnologia financeira da Índia.
Por que o PolicyBazaar implementou transições de visualização?
Por ser uma empresa que prioriza a Web, a equipe da PolicyBazaar sempre teve como objetivo fornecer a melhor experiência possível ao usuário em todas as jornadas ideais. Era uma prática comum implementar transições personalizadas usando JavaScript e CSS mesmo antes do lançamento da API View Transitions, já que ela melhorava a experiência do usuário, criava um fluxo de navegação integrado e melhorava o apelo visual geral dos sites.
No entanto, essas implementações personalizadas tiveram problemas ocasionais relacionados ao desempenho, complexidades na manutenção do código e compatibilidade abaixo do ideal com os frameworks usados. A API View Transitions ajudou a empresa a superar a maioria desses desafios, oferecendo uma interface fácil de usar com benefícios de desempenho disponíveis de forma nativa.
A PolicyBazaar usou transições de visualização em diferentes elementos nas jornadas de pré-citação para que os compradores em potencial fornecessem os detalhes necessários para adquirir apólices de seguro.
Detalhes técnicos da implementação
Eles usam uma abordagem de framework híbrida, com o Angular e o React dominando a maior parte da base de código. Aqui está o trecho de VT do código escrito em Angular e compartilhado por Aman Soni (desenvolvedor líder de front-end do PolicyBazaar):
toggleWidgetAnimation() {
let doc:any = document;
if (!doc.startViewTransition) {
this.toggleWidget();
return;
}
doc.startViewTransition(() => this.toggleWidget());
}
toggleWidget() {
let badgeEle = document.querySelector('.animate_init_state_one');
let textEle = document.querySelector('.animate_init_state_two');
badgeEle.classList.toggle('hide');
textEle.classList.toggle('hide');
}
Depoimento
Rishabh Mehrotra, chefe de design da UO de vida útil, disse que as transições de visualização desempenharam um papel significativo no aprimoramento da experiência do site para os usuários, melhorando a usabilidade, o engajamento e a satisfação geral. Ele ajudou a oferecer navegação suave, interação guiada, carga cognitiva reduzida, estética moderna e muito mais.
Melhorar a experiência na Web é um objetivo fundamental para o PB, e a VT provou ser uma ferramenta fundamental para alcançar esse objetivo de maneira notável. O grande apelo entre a comunidade de desenvolvedores e a base de usuários deixou nossa equipe muito animada. À medida que contemplamos sua integração em diversos PODs, prevemos um impacto positivo de longo alcance nos níveis de satisfação e na excelência operacional.
Saurabh Tiwari (CTO, PolicyBazaar)
Próximas etapas
Você tem interesse em testar as transições de visualização? Veja alguns recursos que você pode acompanhar para saber mais: