`, hvor animationen skal stå. ```html

``` `data-motion` peger på mappen med `manifest.json`. Alt andet, antal billeder, mål, udgaver og scroll-længde, står i manifestet. ## 3. React eller Next.js Afspilleren skal køre i browseren og først, når elementet står i dokumentet. ```jsx "use client"; import { useEffect, useRef } from "react"; const BASE = "/assets/primo-pakke/"; export function ScrollAnimation({ label = "primo-pakke" }) { const holder = useRef(null); useEffect(() => { let stop = () => {}; // Afspilleren starter sig selv, når scriptet hentes, men i React kommer // og går elementet. Derfor startes den på elementet, og stoppes igen, // når komponenten forsvinder: ellers kører tegneløkken videre på noget, // ingen kan se. const start = () => { if (holder.current) stop = window.SqueezeitMotion.boot(holder.current); }; if (window.SqueezeitMotion) { start(); } else { const script = document.createElement("script"); script.src = BASE + "scroll-animation.js"; script.async = true; script.onload = start; document.body.appendChild(script); } return () => stop(); }, []); return

; } ``` Stilarket lægges ind én gang, enten i `app/layout.tsx` med et `` eller ved at kopiere `scroll-animation.css` ind i sidens eget stilark. I Next.js hører mappen til i `public/`, og så er stien `/assets/primo-pakke/` uden `public` i. Ligger siden under et grundpræfiks, skal det med. ## 4. WordPress Læg mappen i temaets mappe, og hent de to filer i `functions.php`: ```php add_action('wp_enqueue_scripts', function () { $base = get_stylesheet_directory_uri() . '/motion/'; wp_enqueue_style('motion', $base . 'scroll-animation.css', [], '1'); wp_enqueue_script('motion', $base . 'scroll-animation.js', [], '1', true); }); ``` Og i skabelonen eller en html-blok: ```html

``` ## 5. Shopify Filerne i `assets/` (Shopify tillader ikke undermapper der, så billederne skal ligge et sted, der gør: en fil pr. billede i `assets/` med navnet bevaret, eller hele mappen på et cdn, du selv styrer). Derefter i sektionen: ```liquid {{ 'scroll-animation.css' | asset_url | stylesheet_tag }}

{{ 'scroll-animation.js' | asset_url | script_tag }} ``` ## Cache og hastighed Billederne er uforanderlige: skifter sekvensen, kommer der en ny mappe. Så de kan caches så længe, serveren gider: ``` Cache-Control: public, max-age=31536000, immutable ``` `manifest.json` skal derimod kunne skiftes ud, så den får en kort levetid: ``` Cache-Control: public, max-age=300 ``` Afspilleren henter selv kun det, der skal bruges: første billede med det samme, derefter en lille bølge omkring dét, der vises nu. Der hentes ikke 94 filer på én gang. ## Fejlfinding - **Intet sker, og der står `data-motion-error` på elementet.** Stien i `data-motion` peger ikke på mappen med `manifest.json`. Den skal være absolut fra sidens rod eller relativ til den side, der viser den. - **Første billede vises, men der sker ikke mere.** Elementet har ingen højde. Det får sin højde af afspilleren (300 vh), medmindre noget andet i sidens css tvinger `height` eller `overflow` på det. - **Billederne kommer ikke.** Se i netværksfanen, om filerne serveres med den rigtige type (`image/webp`). Nogle servere kender ikke webp som standard og skal have den skrevet ind. - **Animationen står stille for nogen.** Sådan skal det være, hvis de har slået bevægelse fra i styresystemet. Så vises første billede, og siden virker.