Vai al contenuto

Mario Animations Framework — Documentazione Ufficiale

📌 Introduzione

Mario Animations Framework è un sistema di animazioni CSS modulare, leggero e completamente indipendente da plugin. È progettato per funzionare perfettamente con:

  • WordPress
  • Gutenberg
  • GenerateBlocks
  • qualsiasi tema (tema‑agnostico)
  • qualsiasi browser (inclusi fork come Thorium e Supermium)

Il framework si basa su tre concetti fondamentali:

  1. Stato iniziale → .mario-anim
  2. Stato finale → .is-visible (aggiunto dal tuo JS)
  3. Moduli CSS → animazioni, utility, preset

📂 1. Struttura del framework

Il framework è composto da:

✔ 1.1 Classe base

mario-anim definisce lo stato iniziale:

  • opacity 0
  • transform iniziale
  • transition base

✔ 1.2 Classi di animazione

Definiscono come l’elemento appare:

  • mario-fade-in
  • mario-slide-up
  • mario-zoom-in
  • mario-bounce-in

✔ 1.3 Utility

Modificano il comportamento:

  • delay
  • duration
  • easing
  • transform (x/y/scale/rotate)

✔ 1.4 Animazioni combinate

Effetti predefiniti:

  • fade + slide
  • zoom + fade
  • bounce + fade

✔ 1.5 Preset

Pattern visivi completi:

  • hero
  • subtitle
  • paragraph
  • cta
  • image
  • section
  • card
  • feature
  • list
  • image-soft
  • cta-strong

🎛 2. Classe base: .mario-anim

css

.mario-anim {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transform-origin: center center;
}

Funzione

  • definisce lo stato iniziale
  • rende l’elemento invisibile
  • imposta la transizione base
  • permette alle utility di sovrascrivere i valori

Uso

html

<div class="mario-anim mario-fade-in mario-on-scroll">...</div>

🎬 3. Animazioni base

3.1 Fade In

css

.mario-fade-in.is-visible {
    opacity: 1;
    transform: none;
}

3.2 Slide Up

css

.mario-slide-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

3.3 Zoom In

css

.mario-zoom-in {
    transform: scale(0.8);
}
.mario-zoom-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

3.4 Bounce In

css

.mario-bounce-in.is-visible {
    opacity: 1;
    transform: none;
    animation: marioBounce 0.6s ease;
}

🧩 4. Utility

Le utility modificano il comportamento delle animazioni senza cambiare il tipo di animazione.

4.1 Delay

css

.mario-delay-200 { transition-delay: 0.2s !important; }
...
.mario-delay-2000 { transition-delay: 2s !important; }

4.2 Duration

css

.mario-duration-200 { transition-duration: 0.2s !important; }
...
.mario-duration-2000 { transition-duration: 2s !important; }

4.3 Easing

css

.mario-ease-soft { transition-timing-function: cubic-bezier(...); }
...
.mario-ease-elastic { transition-timing-function: cubic-bezier(...); }

4.4 Transform utilities

Translate Y

css

.mario-transform-y-100 { transform: translateY(100px) !important; }

Translate X

css

.mario-transform-x-100 { transform: translateX(100px) !important; }

Scale

css

.mario-scale-80 { transform: scale(0.8) !important; }

Rotate

css

.mario-rotate-5 { transform: rotate(5deg) !important; }

🎨 5. Animazioni combinate

5.1 Fade + Slide Up

css

.mario-fade-slide-up {
    opacity: 0;
    transform: translateY(20px);
}
.mario-fade-slide-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

5.2 Fade + Slide Left

css

.mario-fade-slide-left {
    opacity: 0;
    transform: translateX(40px);
}
.mario-fade-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

5.3 Zoom + Fade

css

.mario-zoom-fade {
    opacity: 0;
    transform: scale(0.85);
}
.mario-zoom-fade.is-visible {
    opacity: 1;
    transform: scale(1);
}

🍒 6. Preset (pattern visivi)

I preset sono animazioni complete, pensate per casi d’uso reali.

6.1 Hero

css

.mario-preset-hero {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
                transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.mario-preset-hero.is-visible {
    opacity: 1;
    transform: none;
}

6.2 Subtitle

css

.mario-preset-subtitle {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition-delay: 0.2s;
}

6.3 Paragraph

css

.mario-preset-paragraph {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

6.4 CTA

css

.mario-preset-cta {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.4s cubic-bezier(0.15, 1.1, 0.3, 1),
                transform 0.4s cubic-bezier(0.15, 1.1, 0.3, 1);
    transition-delay: 0.1s;
}

6.5 Image Soft

css

.mario-preset-image-soft {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(8px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
                transform 1s cubic-bezier(0.4, 0, 0.2, 1),
                filter 1s cubic-bezier(0.4, 0, 0.2, 1);
}

6.6 Card

css

.mario-preset-card {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

🧱 7. Preset Builder (template ufficiale)

css

/* Preset: NOME */
.mario-preset-NOME {
    opacity: 0;
    transform: TRANSLATE/ZOOM/COMBO;
    filter: FILTRO_INIZIALE; /* opzionale */
    transition: opacity DURATA EASING,
                transform DURATA EASING,
                filter DURATA EASING; /* opzionale */
    transition-delay: DELAY; /* opzionale */
}

.mario-preset-NOME.is-visible {
    opacity: 1;
    transform: TRANSFORM_FINALE;
    filter: FILTRO_FINALE; /* opzionale */
}

🧪 8. Esempi d’uso

Fade-in semplice

html

<div class="mario-anim mario-fade-in mario-on-scroll">Testo</div>

Slide-up lungo con easing morbido

html

<div class="mario-anim mario-slide-up mario-on-scroll mario-transform-y-100 mario-ease-soft">

Preset hero

html

<h1 class="mario-anim mario-preset-hero mario-on-scroll">Titolo</h1>

CTA forte

html

<a class="mario-anim mario-preset-cta-strong mario-on-scroll">Acquista ora</a>

🧠 9. Best practices

  • usa i preset per elementi ricorrenti
  • usa le utility per personalizzare
  • evita animazioni troppo lunghe
  • evita combinazioni eccessive
  • mantieni coerenza visiva
  • usa mario-on-scroll per contenuti non immediatamente visibili
  • usa mario-on-load per hero e header

🛠 10. Troubleshooting

L’animazione non parte

  • controlla che .mario-anim sia presente
  • controlla che .is-visible venga aggiunto
  • controlla che non ci siano plugin che sovrascrivono opacity/transform
  • svuota la cache del browser
  • se usi Thorium → cancella la cartella Network

L’animazione parte subito

oppure aggiungi mario-delay-*

l’elemento è già nel viewport

usa mario-on-scroll