RESPOND Conference

For	Georg-August-Universität Göttingen
Tags	ProcessWire, Event

RESPOND is a Horizon 2020 research project, which has studied the multilevel governance of migration in Europe and beyond. Its final conference is dedicated to the transnational exchange between researchers, stakeholders and a wider (political) public on main findings, lessons learned and best practices.

Intersections

By overlaying and intersecting vectorized shapes of countries, we developed a generative system which creates new virtual and fluid geographies. The intersections can be seen as metaphors for personal experiences or abstraction of a complex topic.

Iraq and Germany as intersections

Animations on scroll

The simple and nice trick of coupling CSS animations with vertical scrolling is inspired by the solution of Scott Kellum.

Important: While the animation state is set to pause, it is animated by setting a negative animation-delay.

body {
	background: transparent url(background.svg) no-repeat;
	background-position: 0 0;
	background-attachment: fixed;

	background-size: 150vw;

	animation: event-background 5s linear infinite;
	animation-play-state: paused;
	animation-delay: calc(var(--scroll) * -1s);
}

/* the animation */
@keyframes event-background {
	100% {
		background-position: 100% 0;
	}
}

The window’s scroll property is continuously read out and made globally accessible as the CSS variable --scroll.

function respondSetScroll() {
	document.body.style.setProperty('--scroll', window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}

// set offset on scroll
window.addEventListener('scroll', respondSetScroll, false);