SWCore / Animações / Magnetic (ímã)

Magnetic (ímã) Animações

O botão é "atraído" pelo cursor quando ele se aproxima — micro-interação de destaque.

O que é

O elemento se desloca em direção ao cursor quando ele entra na área de influência, como se fosse atraído por um ímã, e volta ao lugar quando o mouse sai.

Como funciona

Usa quickTo do GSAP pra um movimento elástico e fluido, sem travar mesmo com o mouse se movendo rápido. A força do "ímã" é configurável em data-sw-strength.

Exemplos

Botão magnético — chegue perto com o mouse Ao vivo
<button sw-ani="magnetic" sw-btn="pri">o botão é atraído pelo cursor</button>
Força da atração Ao vivo
strength 10
(sem atributo)
strength 60
<button sw-ani="magnetic" data-sw-strength="10">discreto</button>
<button sw-ani="magnetic">padrão</button>
<button sw-ani="magnetic" data-sw-strength="60">bem puxado</button>

<!-- a força usa a grafia data-sw-strength (não sw-ani-strength) -->
Em ícone e em cartão Ao vivo
Cartão magnético
chegue perto com o mouse
<div sw-ani="magnetic">
  <i class="swi-heart"></i>
</div>

<div sw-ani="magnetic" data-sw-strength="25" class="bg-sur bd r-m p-m">
  Cartão magnético
</div>

Atributos

data-sw-strength
o quanto o elemento é puxado na direção do cursor

Variantes

(padrão)
atração discreta, boa pra botão de ação
strength baixo
quase imperceptível — só um "acordar" do botão
strength alto
o elemento persegue bastante o cursor

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • Precisa do pacote swcore.motion.min.css/js.

Limitações — o que ele não faz

  • Depende de mouse: no celular o elemento fica parado. Nunca deixe informação só no estado atraído.
  • Em botão pequeno, atração forte atrapalha o clique — o alvo foge do dedo/cursor. Use força baixa em alvos pequenos.