/** * DP Motion — verbergt alleen de begintoestand van elementen die daadwerkelijk * geanimeerd worden. * * De .dp-motion class op wordt uitsluitend door dp-motion.js gezet, en * alleen wanneer GSAP geladen is EN de bezoeker geen reduced-motion wil. Laadt * GSAP niet, of gaat er iets mis, dan bestaat deze class niet en is alle * content gewoon zichtbaar. Nooit permanent verborgen content. */ /** * Let op de :not([data-dp-stagger]) in de eerste regel. Een element met * data-dp-stagger is een TRIGGER, geen animatiedoel: de JS animeert z'n * kinderen en zet is-dp-revealed op die kinderen, nooit op de container zelf. * Zonder deze uitzondering blijft zo'n container permanent op opacity 0 staan * en zijn z'n kinderen dus onzichtbaar, hoe netjes ze zelf ook inanimeren. */ .dp-motion [data-dp-anim]:not([data-dp-stagger]):not(.is-dp-revealed), .dp-motion [data-dp-stagger] > *:not(.is-dp-revealed) { opacity: 0; } /* Print en reduced-motion: altijd zichtbaar, wat er ook gebeurd is. */ @media print { .dp-motion [data-dp-anim], .dp-motion [data-dp-stagger] > * { opacity: 1 !important; transform: none !important; } } @media (prefers-reduced-motion: reduce) { .dp-motion [data-dp-anim], .dp-motion [data-dp-stagger] > * { opacity: 1 !important; transform: none !important; } }