Previous Next

RESPOND Conference

ForGeorg-August-Universität Göttingen
Websitewww.respond-conference.eu
TagsProcessWire, 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
Greece / Poland
Greece / Poland
Hungary / Great Britain
Hungary / Great Britain
Iraq / Austria
Iraq / Austria
Italy / Germany
Italy / Germany
Turkey / Lebanon
Turkey / Lebanon

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);

🤯