2
respostas

2 animações em um mesmo frame

Preciso utilizar 2 animações em um mesmo frame. O frame é um botão (ele não muda de cor) A primeira ação é aparecer um tooltip abaixo dele e a segunda ação seria clicar no botão e aparecer uma modal com background escurecido para dar destaque.

Estou usando na primeira ação - hover (while hovering) com open overlay para o frame de tooltip e o overlay é localização manual com animação instant A segunda animação que preciso é click (on click) que está disponível, com open overlay para o frame da modal e o overlay é localização manual também com background behind overlay.

Porém essa segunda ação não acontece! Funciona apenas o hover e o click fica com um ponto de interrogação dentro de uma bolinha escura.

Porque isso?? O que tenho que fazer??

Já tentei criar o componente com o botão e o botão com o tooltip no mesmo frame e fazer a interação hover entre eles e depois faço o click com o primeiro componente (apenas botão) e ele trocaria sozinho para o outro. Mas não acontece. A ação de hover não acontecer, fica liberada apenas o do click.

Me ajudem!!! Tenho projeto para entregar e não consigo realizar isso

2 respostas

Oi, Carina, tudo bem?

Eu tentei fazer essa animação aqui e realmente não funciona. A alternativa que eu pensei é a seguinte:

Em ver de fazer o while hovering com o open overlay abrindo o tooltip por cima, haveria um frame do botão + um do botão com o tooltip pra essa animação acontecer. Ai, enquanto o hovering estivesse acontecendo, o botão com o tooltip iria estar acima do botão inicial.

Para a animação do click acontecer, faria ela do botão com o tooltip com um click para o modal com o open overlay.

Com isso, apenas trocaria um frame e as animações iriam funcionar. Mostrei como fiz na imagem abaixo

Dois prints do canvas do Figma, mostrando as animações descritas no texto

Maria olá! Obrigada pelo retorno.

Eu fiz mais ou menos isso. Apenas no tooltip utilizei um frame que "cobrisse" o espaço do botão, mas deixei vazio, sem o botão em si. Então no botão coloquei a ação de while hovering e no frame do tooltip a ação de click para visitar a página.

Deu certo!

Isso que eu fiz foi com a ajuda do TUXU do Figma Brasil.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade