Premium — UI Interativa
Drag, Flip, Observer fullpage e scroll suave — via Draggable, Flip e
Observer Plugin do GSAP. Equivalente ao Lab 07 (demo-ui.html) do Smooll original.
Parâmetros disponíveis
| Atributo | Tipo | Descrição |
|---|---|---|
sw-premium-drag |
x/y/xy/rotation | Tipo de arraste |
sw-premium-drag-bounds |
"parent" ou seletor | Limite do arraste |
sw-premium-drag-snap |
JSON | Posições de encaixe ao soltar |
sw-premium-drag-inertia |
presença | Física de inércia após soltar |
sw-premium-flip / -flip-class / -flip-target |
presença / string / seletor | Ativa o Flip Plugin ao clicar, alternando uma classe |
sw-premium-observer / -observer-type |
presença / string | Fullpage sections via Observer Plugin, ex: "wheel,touch" |
sw-premium-scroll-to / -scroll-offset |
seletor / número | Scroll suave ao clicar (ScrollToPlugin) |
1. sw-premium-drag — Draggable
Bounds precisa de container position:relative com tamanho
definido, e o elemento arrastável de position:absolute.
Livre (xy) + bounds
Só horizontal (x)
Rotation — girar
Com snap (encaixe)
Com inércia — arraste rápido e solte
2. sw-premium-flip — clique nos cards
Captura o estado visual antes/depois de alternar uma classe CSS e anima a transição. Defina os dois estados no seu CSS.
Card expande de tamanho
Accordion — cada item com seu próprio sw-premium-flip
O que é sw-premium-flip?
Captura o estado visual antes e depois de uma mudança de CSS e anima via GSAP Flip Plugin.
Precisa de JavaScript?
Não — só atributos HTML, a lógica de estado e animação é automática.
3. sw-premium-scroll-to — scroll suave
Links e botões com scroll animado via ScrollToPlugin do GSAP.
4. sw-premium-observer — fullpage sections
Detecta wheel/touch e desliza entre seções. Role com o mouse dentro da área abaixo. O container precisa de altura explícita.
O motor injeta o comportamento, não o visual. Três coisas ficam por sua conta: (1)
sw-premium-drag com bounds="parent" — o pai precisa de
position:relative e tamanho definido, o elemento arrastável de
position:absolute; (2) sw-premium-flip — defina os dois estados CSS
(antes/depois da classe); (3) sw-premium-observer — o container precisa de altura
explícita, não auto.