Scroll Driven Animation | Delayed Risoprint

[DamianR2004]

No description provided.

[DamianR2004]

Delayed Risoprint

Vooraf aan deze opdracht hebben we via de roulette FDND site een onderwerp gekregen waarop we een scroll animatie moeten bouwen. Ik kreeg uit het roulette het onderwerp Delayed Risoprint. Ik wist van tevoren nog niet wat dit betekende dus heb het even opgezocht. Risoprint of risograph is een printtechniek waarbij verschillende kleuren over elkaar zijn gelegd, dit kan bijvoorbeeld met letters en figuren.

Ik heb hiervoor een moodboard gemaakt.

Bouwen

Ik heb al eens eerder gebruikt gemaakt van scroll driven animations. Voor deze creative spike heb ik vooral verschillende technieken van de scroll animations gebruiken, waaronder het verschil tussen view() en scroll(). Met het gebruik van view() en animation-range: entry zorg je ervoor dat de animatie zich pas voordoet als het object te zien is. Met scroll zorg je ervoor dat het al gebeurt vanaf het begin van de pagina. Dit is ook aan te passen met animation-range: contain 0% (horizontaal) contain 40% (verticaal), het percentage is hier het deel van de pagina. Hieronder heb ik een code voorbeeld neergezet:

https://github.com/itsValyria/Oncollaboration/blob/ed39648944fa7f0253106146094177aec6d9ddf1/src/lib/Blocks/featured-webinar.svelte#L83-L126

Video

ezyZip.mp4