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.
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!
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
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!