View timelines

Het logo hierboven gebruikt een scroll timeline, de andere voorbeelden op deze pagina gebruiken view timelines. Scroll timeline is op basis van de scroll-positie van de 'parent scroller', meestal de pagina zelf.
View timelines zijn op basis van de positie van het element in de viewport. Vergelijkbaar met intersection observer in javascript.
Wordt nog niet in alle browsers ondersteund, maar de fallback is gewoon geen animaties. En dit werkt zonder javascript, dus jah...
Meer: Animation range tooltje, demo's.

Space intentionally left blank
View timeline coming up

Met scroll timeline

Contentblokje

De animatie is gekoppeld aan de scroll-positie. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur pariatur expedita, nobis, necessitatibus ullam nesciunt aliquam exercitationem veritatis possimus totam dolorem nam maxime quis fuga a cupiditate? Impedit facere repellendus maxime labore distinctio at eligendi ad officia esse, fugit non provident amet nesciunt rerum exercitationem maiores illo, doloremque repudiandae voluptatem!

Space intentionally left blank
View timeline with trigger coming up

Met scroll timeline trigger

Contentblokje

De animatie begint bij een bepaalde scroll-positie en wordt dan gewoon 'afgespeeld'. Gebruikt container style queries. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur pariatur expedita, nobis, necessitatibus ullam nesciunt aliquam exercitationem veritatis possimus totam dolorem nam maxime quis fuga a cupiditate? Impedit facere repellendus maxime labore distinctio at eligendi ad officia esse, fugit non provident amet nesciunt rerum exercitationem maiores illo, doloremque repudiandae voluptatem!

Met een masking effectje

Contentblokje

Space intentionally left blank