{"id":1165,"date":"2026-01-13T08:53:51","date_gmt":"2026-01-13T08:53:51","guid":{"rendered":"https:\/\/studioimmens.com\/animazioni-gutenberg-senza-javascript\/"},"modified":"2026-07-16T17:02:37","modified_gmt":"2026-07-16T15:02:37","slug":"animazioni-gutenberg-senza-javascript","status":"publish","type":"post","link":"https:\/\/studioimmens.com\/en\/animazioni-gutenberg-senza-javascript\/","title":{"rendered":"Animazioni per Gutenberg senza JavaScript: guida CSS puro"},"content":{"rendered":"<p>Le animazioni rendono un sito web pi&ugrave; coinvolgente, professionale e memorabile. Ma fino a oggi, per avere animazioni scroll-driven dovevi fare una scelta dolorosa: performance o effetti? In questo articolo vediamo come creare animazioni per Gutenberg senza JavaScript, sfruttando le potenzialit&agrave; native del CSS moderno, e come garantire la compatibilit&agrave; con tutti i browser usando un polyfill progressivo.<\/p>\n<h2>Il costo nascosto delle librerie JavaScript per animazioni<\/h2>\n<p>Ogni libreria JavaScript che aggiungi al tuo sito ha un costo. Ecco l&#8217;impatto concreto delle librerie di animazioni pi&ugrave; popolari:<\/p>\n<table>\n<tr>\n<th>Libreria<\/th>\n<th>Peso (KB)<\/th>\n<th>TBT (ms)<\/th>\n<th>Lighthouse<\/th>\n<\/tr>\n<tr>\n<td>AOS<\/td>\n<td>~35 KB<\/td>\n<td>~120 ms<\/td>\n<td>~85<\/td>\n<\/tr>\n<tr>\n<td>GSAP<\/td>\n<td>~50 KB<\/td>\n<td>~180 ms<\/td>\n<td>~80<\/td>\n<\/tr>\n<tr>\n<td>ScrollMagic<\/td>\n<td>~25 KB<\/td>\n<td>~90 ms<\/td>\n<td>~88<\/td>\n<\/tr>\n<tr>\n<td>WOW.js<\/td>\n<td>~15 KB<\/td>\n<td>~60 ms<\/td>\n<td>~90<\/td>\n<\/tr>\n<tr>\n<td><strong>CSS Scroll-Driven<\/strong><\/td>\n<td><strong>0 KB<\/strong><\/td>\n<td><strong>0 ms<\/strong><\/td>\n<td><strong>100<\/strong><\/td>\n<\/tr>\n<\/table>\n<h2>Come funzionano le animazioni scroll-driven CSS<\/h2>\n<p>Le animazioni scroll-driven CSS usano la propriet&agrave; <code>animation-timeline: view()<\/code>, supportata nativamente da Chrome 115+, Edge 115+ e Opera 101+. Non richiedono JavaScript, non occupano il thread principale del browser e non impattano i Core Web Vitals.<\/p>\n<p>La sintassi &egrave; semplice e dichiarativa:<\/p>\n<pre><code>.cb-fade-in {\n    animation: cbFadeIn 1s ease both;\n    animation-timeline: view();\n}\n@keyframes cbFadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}<\/code><\/pre>\n<h2>I 12 pack di animazioni senza JavaScript<\/h2>\n<p>Le animazioni scroll-driven CSS coprono praticamente ogni esigenza. Ecco le categorie principali di effetti che puoi creare senza JavaScript:<\/p>\n<h3>Scroll Effects (animazioni che partono con lo scroll)<\/h3>\n<ul>\n<li><strong>Fade:<\/strong> fade-in, fade-up, fade-down, fade-left, fade-right<\/li>\n<li><strong>Slide:<\/strong> slide-up, slide-down, slide-left, slide-right<\/li>\n<li><strong>Zoom:<\/strong> zoom-in, zoom-out<\/li>\n<li><strong>Float:<\/strong> float, float-inv (effetto galleggiante)<\/li>\n<li><strong>Rotate:<\/strong> rotate, rotate-inv<\/li>\n<li><strong>Flip:<\/strong> flip-x, flip-y (3D perspective)<\/li>\n<li><strong>Scale:<\/strong> scale-up, scale-down<\/li>\n<\/ul>\n<h3>Attention Effects (animazioni ad attenzione)<\/h3>\n<ul>\n<li><strong>Bounce:<\/strong> effetto rimbalzo all&#8217;ingresso<\/li>\n<li><strong>Blur:<\/strong> da sfocato a nitido<\/li>\n<li><strong>Shake:<\/strong> scossa per attirare l&#8217;attenzione<\/li>\n<li><strong>Pulse:<\/strong> pulsazione continua<\/li>\n<\/ul>\n<h3>Text Effects (animazioni per il testo)<\/h3>\n<ul>\n<li><strong>Text reveal:<\/strong> svelamento lettera per lettera<\/li>\n<li><strong>Wave:<\/strong> effetto onda sul testo<\/li>\n<li><strong>Pop:<\/strong> lettere che appaiono in sequenza<\/li>\n<li><strong>Glow:<\/strong> bagliore graduale<\/li>\n<\/ul>\n<h3>Mask &amp; Reveal (effetti di rivelazione)<\/h3>\n<ul>\n<li><strong>Circle reveal:<\/strong> rivelazione circolare<\/li>\n<li><strong>Slide reveal:<\/strong> svelamento laterale<\/li>\n<li><strong>Curtain:<\/strong> effetto tendina<\/li>\n<li><strong>Mask gradient:<\/strong> maschera graduale<\/li>\n<\/ul>\n<h2>La sfida della compatibilit&agrave; cross-browser<\/h2>\n<p>Il problema principale delle animazioni scroll-driven CSS &egrave; che non sono ancora supportate da tutti i browser. Safari ha un supporto parziale, Firefox &egrave; ancora in fase di sviluppo. Come si risolve?<\/p>\n<p>La soluzione &egrave; un <strong>polyfill progressivo<\/strong> che funziona in tre strati:<\/p>\n<ol>\n<li><strong>CSS nativo<\/strong>: le animazioni sono scritte con <code>animation-timeline: view()<\/code> e funzionano perfettamente su Chrome, Edge e Opera<\/li>\n<li><strong>Fallback CSS<\/strong>: aggiungendo <code>animation-duration: 1s<\/code> e <code>animation-iteration-count: 2<\/code> con <code>direction: alternate<\/code>, i browser non supportati mostrano comunque un&#8217;animazione temporale (non scroll-driven, ma visibile)<\/li>\n<li><strong>Polyfill JS<\/strong>: con <code>CSS.supports('animation-timeline', 'view()')<\/code> rilevi il supporto. Se non supportato, attivi uno scroll observer che mappa la posizione dell&#8217;elemento all&#8217;avanzamento dell&#8217;animazione<\/li>\n<\/ol>\n<h2>Esempio completo di animazione senza JavaScript in Gutenberg<\/h2>\n<pre><code>\/* 1. Definisci l'animazione in CSS *\/\n.cb-fade-up {\n    animation: cbFadeUp 1s ease both;\n    animation-timeline: view();\n    animation-range: entry 0% entry 100%;\n}\n\n@keyframes cbFadeUp {\n    from {\n        opacity: 0;\n        transform: translateY(60px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n\/* 2. Applica al blocco Gutenberg *\/\n\/* Nel campo \"Classe CSS aggiuntiva\" di un blocco, scrivi: cb-fade-up *\/<\/code><\/pre>\n<h2>ClassyBlocks Pro: animazioni Gutenberg senza codice<\/h2>\n<p><a href=\"https:\/\/studioimmens.com\/en\/classyblocks-pro\/\">ClassyBlocks Pro<\/a> &egrave; un plugin che porta 151 animazioni scroll-driven in Gutenberg, con un approccio unico:<\/p>\n<ul>\n<li><strong>12 pack di animazioni<\/strong>: Essential Scroll, Hero Effects, Text Effects, Mask &amp; Reveal, Hover Effects, Background Effects, Loading &amp; Progress, Mouse Magic, Attention Grabbers, Extra Attention, Special Scroll, Entrance Effects<\/li>\n<li><strong>Zero JS sui browser moderni<\/strong>: Chrome, Edge e Opera usano animation-timeline nativa<\/li>\n<li><strong>Polyfill automatico<\/strong>: Safari, Firefox e browser legacy ricevono lo stesso effetto via JS polyfill<\/li>\n<li><strong>CSS fallback<\/strong>: se JS &egrave; disabilitato, le animazioni partono con durata 1s<\/li>\n<li><strong>Integrazione Gutenberg<\/strong>: pannello visuale con preview live, applicazione con un click<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Le animazioni rendono un sito web pi&ugrave; coinvolgente, professionale e memorabile. Ma fino a oggi, per avere animazioni scroll-driven dovevi fare una scelta dolorosa: performance o effetti? In questo articolo vediamo come creare animazioni per Gutenberg senza JavaScript, sfruttando le potenzialit&agrave; native del CSS moderno, e come garantire la compatibilit&agrave; con tutti i browser usando [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1224,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","ai_primary_source":"Studio Immens Blog","visibility_scope":"","ai_summary":"","ai_intent":"informative","ai_related_resources":"","ai_priority":0,"ai_entity_type":"","ai_is_based_on":"","ai_citations":"","ai_mentions":"","ai_speakable_selector":"","ai_chunk_hints":"","footnotes":""},"categories":[40],"tags":[116,118,115,117],"ai_visibility":[],"class_list":["post-1165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppo-web","tag-animazioni-css","tag-core-web-vitals","tag-performance-wordpress","tag-scroll-driven"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/comments?post=1165"}],"version-history":[{"count":1,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1165\/revisions"}],"predecessor-version":[{"id":1185,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1165\/revisions\/1185"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media\/1224"}],"wp:attachment":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media?parent=1165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/categories?post=1165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/tags?post=1165"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/ai_visibility?post=1165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}