70. Conhecendo as animações do Framer

Descrição

Comentários

Nesta aula eu mostro, com exemplos reais de clientes, todos os efeitos e animações do Framer que eu uso no dia a dia. Começo mostrando a lista básica: appear (aparecer), hover e press (interações de mouse), loop (animação contínua), drag (arrastar) e lightbox (abrir mídia). Em seguida exploro os quatro tipos de animação por rolagem: scroll animation (animação controlada pela rolagem), scroll speed (velocidade relativa dos elementos), scroll transform (dispara uma animação pré-definida entre dois estados) e scroll variante (troca de variantes de componente ao atingir um gatilho). Eu também explico diferenças práticas e dicas: usar appear preferencialmente na hero para não disparar tudo ao carregar, usar scroll transform quando quiser disparos pontuais com tempo fixo, e scroll speed para efeitos tipo parallax. Mostro casos de menus que mudam com scroll variante e quando aplicar loop, hover e drag. No futuro farei aulas separadas detalhando cada animação com passo a passo. Termos técnicos explicados: - scroll: rolagem da página. - appear: animação que ocorre ao carregar/ficar visível. - scroll animation: animação cujo progresso é controlado pela rolagem. - scroll speed: altera a velocidade de movimento de elementos durante o scroll (efeito parallax). - scroll transform: dispara uma animação predefinida A→B ao atingir um gatilho de rolagem. - scroll variante: troca de variantes de um componente quando atinge um ponto do scroll. - loop: animação contínua (repetição). - drag: interação que permite arrastar elementos. - hover/press: estados de passagem do mouse e clique. - componente/variante: componente é um elemento reutilizável; variante é uma de suas versões/estados.

Comentários

Descrição

Comentários

Nesta aula eu mostro, com exemplos reais de clientes, todos os efeitos e animações do Framer que eu uso no dia a dia. Começo mostrando a lista básica: appear (aparecer), hover e press (interações de mouse), loop (animação contínua), drag (arrastar) e lightbox (abrir mídia). Em seguida exploro os quatro tipos de animação por rolagem: scroll animation (animação controlada pela rolagem), scroll speed (velocidade relativa dos elementos), scroll transform (dispara uma animação pré-definida entre dois estados) e scroll variante (troca de variantes de componente ao atingir um gatilho). Eu também explico diferenças práticas e dicas: usar appear preferencialmente na hero para não disparar tudo ao carregar, usar scroll transform quando quiser disparos pontuais com tempo fixo, e scroll speed para efeitos tipo parallax. Mostro casos de menus que mudam com scroll variante e quando aplicar loop, hover e drag. No futuro farei aulas separadas detalhando cada animação com passo a passo. Termos técnicos explicados: - scroll: rolagem da página. - appear: animação que ocorre ao carregar/ficar visível. - scroll animation: animação cujo progresso é controlado pela rolagem. - scroll speed: altera a velocidade de movimento de elementos durante o scroll (efeito parallax). - scroll transform: dispara uma animação predefinida A→B ao atingir um gatilho de rolagem. - scroll variante: troca de variantes de um componente quando atinge um ponto do scroll. - loop: animação contínua (repetição). - drag: interação que permite arrastar elementos. - hover/press: estados de passagem do mouse e clique. - componente/variante: componente é um elemento reutilizável; variante é uma de suas versões/estados.

Comentários

Descrição

Comentários

Nesta aula eu mostro, com exemplos reais de clientes, todos os efeitos e animações do Framer que eu uso no dia a dia. Começo mostrando a lista básica: appear (aparecer), hover e press (interações de mouse), loop (animação contínua), drag (arrastar) e lightbox (abrir mídia). Em seguida exploro os quatro tipos de animação por rolagem: scroll animation (animação controlada pela rolagem), scroll speed (velocidade relativa dos elementos), scroll transform (dispara uma animação pré-definida entre dois estados) e scroll variante (troca de variantes de componente ao atingir um gatilho). Eu também explico diferenças práticas e dicas: usar appear preferencialmente na hero para não disparar tudo ao carregar, usar scroll transform quando quiser disparos pontuais com tempo fixo, e scroll speed para efeitos tipo parallax. Mostro casos de menus que mudam com scroll variante e quando aplicar loop, hover e drag. No futuro farei aulas separadas detalhando cada animação com passo a passo. Termos técnicos explicados: - scroll: rolagem da página. - appear: animação que ocorre ao carregar/ficar visível. - scroll animation: animação cujo progresso é controlado pela rolagem. - scroll speed: altera a velocidade de movimento de elementos durante o scroll (efeito parallax). - scroll transform: dispara uma animação predefinida A→B ao atingir um gatilho de rolagem. - scroll variante: troca de variantes de um componente quando atinge um ponto do scroll. - loop: animação contínua (repetição). - drag: interação que permite arrastar elementos. - hover/press: estados de passagem do mouse e clique. - componente/variante: componente é um elemento reutilizável; variante é uma de suas versões/estados.

Comentários
Conhecendo as animações do Framer
Framer
0:00-0:00
Especialista

Henrique Sabino

Wama e Elogiou

Olá 👋,

aluno(a)

Aqui é o Will, em que posso ajudar?

Sugestões & Feedbacks