/* =========================================================================== anim.css — eigen scroll-animatiemechanisme, los van js/webflow.js. Zie ANIM-PATROON.md in de wortel van de site voor het volledige handboek: welk data-attribuut op welk soort element, welke varianten er zijn, hoe je dit in een pagina laadt, en wat je niet moet doen. DE BELANGRIJKSTE REGEL VAN DIT BESTAND: zonder de klasse `vp-anim-armed` op doet geen enkele regel hieronder iets. Die klasse zet alleen `vp/anim.js`, en alleen als de bezoeker geen prefers-reduced-motion heeft. Geen JavaScript, JS geblokkeerd, of het script laadt niet: dan blijft ieder element met `data-vp-anim` gewoon in zijn normale, zichtbare stand. De eindstand staat dus nergens apart geschreven; het IS de rusttoestand van de pagina zonder deze klasse. Alleen de BEGINstand (verschoven, onzichtbaar) is hieronder als uitzondering vastgelegd. Gemeten op de homepage (Playwright, echte Chromium, zie ANIM-PATROON.md stap "Meting 1" en "Meting 2"): de Webflow-scroll-interacties verschuiven overwegend 100px, draaien op 1000ms met een outQuart-kromme, en een groep die na elkaar binnenkomt (de rij val-iconen, de rij benefit-afbeeldingen) staggert met een vaste stap tussen de kinderen. Dit mechanisme volgt diezelfde afstand en kromme, en past op de duur en de stap de sitebrede regel toe uit ANIMATIE-PATROON.md: bestaande duur x 0,7, vloer 120ms. Alleen het getal vóór "ms" is aangepast; de afstand (100px) is een DOEL-waarde en blijft ongemoeid, exact zoals die regel voorschrijft. =========================================================================== */ :root { --vp-anim-duration: 700ms; /* 1000ms gemeten x 0,7 (vloer 120ms wordt hier niet geraakt) */ --vp-anim-ease: cubic-bezier(0.25, 1, 0.5, 1); /* outQuart, dezelfde kromme als de Webflow IX2-presets */ --vp-anim-distance: 100px; /* gemeten afstand, ongewijzigd: dit is een doelwaarde, geen duur */ --vp-anim-stagger: 70ms; /* 100ms gemeten stap tussen groepsleden x 0,7 */ } /* --------------------------------------------------------------------------- Een `left`- of `right`-element staat vóór onthulling 100px opzij van zijn eigen plek. Staat het element dicht genoeg bij de paginarand (gemeten: binnen 100px minus de eigen marge), dan duwt die offset de horizontale scrollbreedte van de hele pagina open, ook al is dat maar tijdelijk en ook al is het onzichtbaar door opacity. Dat is geen bug in transform zelf maar hoe scrollable overflow wordt berekend: een getransformeerde doos telt mee op zijn GESCHOVEN positie. Vastgesteld met Playwright op 320px, zie ANIM-PATROON.md meting 3. Overflow-x dicht op het WORTELELEMENT () lost dit op voor echte gebruikersinteractie (wielscroll, touch, scrollbalk: geen van drieën komt er nog voorbij, geverifieerd) zonder de gepinde scenes te raken: position: sticky elders op de pagina bleef in de proef gewoon werken, want is zelf het scrollend element van het document. NIET UITBREIDEN NAAR . Diezelfde proef met overflow-x: hidden op ZOWEL als brak position: sticky volledig (de sticky bleef niet meer op zijn plek staan tijdens scrollen). BRIEF.md beschermt de twee gepinde scroll-scenes expliciet; dit is precies het soort wijziging die dat stilzwijgend had kunnen breken. --------------------------------------------------------------------------- */ html.vp-anim-armed { overflow-x: hidden; } /* --------------------------------------------------------------------------- Beginstand. Alleen actief onder html.vp-anim-armed, dus alleen als anim.js heeft kunnen draaien én de bezoeker geen reduced motion heeft. Focusbare inhoud blijft in de tabvolgorde. Een focus op het doel of een kind forceert hieronder direct de zichtbare eindstand. --------------------------------------------------------------------------- */ html.vp-anim-armed [data-vp-anim] { opacity: 0; will-change: transform, opacity; } html.vp-anim-armed [data-vp-anim="up"] { transform: translateY(var(--vp-anim-distance)); } html.vp-anim-armed [data-vp-anim="left"] { transform: translateX(calc(-1 * var(--vp-anim-distance))); } html.vp-anim-armed [data-vp-anim="right"] { transform: translateX(var(--vp-anim-distance)); } /* --------------------------------------------------------------------------- Eindstand ná onthulling. anim.js zet deze klasse pas zodra het element de kijkzone raakt, en maar één keer: er wordt niet teruggeschakeld bij terugscrollen. --vp-anim-delay komt van anim.js op elk kind van een [data-vp-anim-group], op basis van zijn plaats in de groep. Staat de eigenschap niet op het element (geen groep), dan valt de var terug op 0ms. --------------------------------------------------------------------------- */ html.vp-anim-armed [data-vp-anim].vp-anim-in { opacity: 1; transform: none; transition: opacity var(--vp-anim-duration) var(--vp-anim-ease), transform var(--vp-anim-duration) var(--vp-anim-ease); transition-delay: var(--vp-anim-delay, 0ms); will-change: auto; } html.vp-anim-armed [data-vp-anim]:focus, html.vp-anim-armed [data-vp-anim]:focus-within { opacity: 1; transform: none; transition: none; will-change: auto; } /* --------------------------------------------------------------------------- prefers-reduced-motion: reduce — niets beweegt. Dit vangt zowel het geval af waarin anim.js de voorkeur zelf al correct herkende (dan is deze regel overbodig, want vp-anim-armed staat er nooit op) als het geval waarin die herkenning om wat voor reden dan ook faalt: zelfs mét de klasse op dwingt dit blok de eindstand direct af, zonder transitie. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.vp-anim-armed [data-vp-anim] { opacity: 1 !important; transform: none !important; transition: none !important; } }