Ik ben afgelopen weekend bezig geweest met P5.js en heb een misselijk makend iets gecreeerd.

![[Schermopname 2024-12-09 om 09.48.57.mov]]

Week planning:

Maandag

• ochtend: mentor
• middag: les
• avond: vrij

Dinsdag

• ochtend: werk
• middag: view transitions project
• avond: sporten

Woensdag:

• ochtend: afspraak + view transitions verder werken
• middag: les
• avond: iloveweb ?

Donderdag

• ochtend: werk
• middag: client project
• avond: sporten, viewtransitions

Vrijdag

• ochtend: sprint review? + verder werken
• middag: les
• avond: vrij

9 december

Mentor

We zijn begonnen met de UI events deeltaak. Mentoren moesten ook mee doen, dus ik heb hem ook weer geopend. Komt goed uit, want vorig jaar niet ver gekomen want orgaan verloren toen, RIP blinde darm.

Hierdoor heb ik geleerd over javascript drag events. Ik wist niet dat dit kon in vanilla JS.

• JS drag and drop
• Device motion

Andere leuke dingen:

• Object animation along SVG path

CC Spike II: View Transitions

view-transitions.chrome.dev

Cross Document

/* Met CSS! */
@view-transition {
	navigation: auto
}

Same Document

Door view-transition-name te gebruiken, koppel je twee elementen aan elkaar.

demo

// Met JS voor micro interacties - niet overal supported
	if (document.startViewTransition) {
		document.startViewTransition(toggleActiveState / functie) 
	} else {
		toggleActiveState()
	}

In de console heb je een animatie tab, hier kan je animaties beter inspecteren en langzamer afspelen.

Tussen pagina’s animeren

Jake Archibald’s article

::view-transition-old(text), 
::view-transition-new(text) { 
	  /* Break aspect ratio at an element level */ 
	height: 100%; 
	  /* But maintain it within the image itself */ 
	object-fit: none; 
	  /* And hide parts of the image that go out of bounds */ 
	overflow: clip; }