Demo ufficiale delle animazioni
Questa pagina mostra esempi reali di tutte le principali funzionalità del framework: animazioni base, utility, combinazioni e preset.
Ogni blocco indica le classi utilizzate, così puoi replicare facilmente gli effetti in Gutenberg o GenerateBlocks.
Animazioni base
Questi esempi usano le classi fondamentali: mario-anim + tipo di animazione + trigger.
Fade In
Classe: mario-anim mario-fade-in mario-on-scroll
Un semplice fade-in con leggero movimento verticale di base.
Zoom In
Classe: mario-anim mario-zoom-in mario-on-scroll
Leggero zoom-in con fade, ideale per elementi focali.
Bounce In
Classe: mario-anim mario-bounce-in mario-on-scroll
Effetto rimbalzo semplice, adatto a elementi che devono attirare l’attenzione.
Utility: delay, duration, easing, transform
Qui vedi come le utility modificano il comportamento delle animazioni base.
Fade In lento con delay
Classi:
mario-delay-800 mario-duration-1000 mario-ease-smooth
Appare dopo 0.8s, con durata di 1s e easing morbido.
Zoom In rapido e “snappy”
Classi:
mario-duration-300 mario-ease-snappy
Animazione veloce, perfetta per micro‑interazioni.
Fade + slide laterale con bounce
Classi:
mario-transform-x-100 mario-duration-600 mario-ease-bounce
Effetto più energico, con ingresso laterale.
Animazioni combinate
Effetti predefiniti che combinano fade, slide, zoom e bounce.
Zoom + Fade
Effetto moderno, ideale per elementi focali.
Bounce + Fade
Ingresso più vivace, da usare con moderazione.
Preset base
Pattern pensati per elementi ricorrenti: hero, sottotitoli, paragrafi, CTA, immagini, sezioni.
Hero
Classe: mario-anim mario-preset-hero mario-on-scroll
Perfetto per il titolo principale di pagina o sezione.
Subtitle
Classe: mario-anim mario-preset-subtitle mario-on-scroll
Ingresso morbido, leggermente ritardato rispetto all’hero.
Paragraph
Classe: mario-anim mario-preset-paragraph mario-on-scroll
Ideale per blocchi di testo lunghi, leggibile e discreto.
Image
Classe: mario-anim mario-preset-image mario-on-scroll
Ingresso morbido, con movimento verticale medio.
Section
Classe: mario-anim mario-preset-section mario-on-scroll
Perfetto per titoli di sezione o blocchi introduttivi.
Preset avanzati
Pattern più specifici per card, feature, liste, immagini soft e CTA forti.
Card
Ingresso con slide-up medio e leggero zoom.
Feature
Più importante della card, con delay e durata maggiori.
List item
- Voce di lista 1
- Voce di lista 2
- Voce di lista 3
Image Soft
Stress test (paragrafi lunghi)
Qui puoi verificare il comportamento su contenuti molto lunghi.
Paragrafo lungo con delay
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.