Loader

Allows pages to be navigated without a refresh, similar to how single-page applications work. It does that by preventing the default functionality when clicking on a link, loading its href with AJAX, and injecting the content.

<div ob-loader>
	<div ob-loader-container>
		<h1>Foo</h1>

		<p>Vivamus eu volutpat enim. Proin …</p>
		<p>Integer ligula eros, mattis ac …</p>
		<p>Sed eget imperdiet nulla. Vestibulum …</p>

		<nav>
			<a class="is-active" href="/examples/loader">Foo</a>
			<a href="/examples/loader/bar">Bar</a>
		</nav>
	</div>
</div>

import { Watcher } from 'oblik'
import { Loader } from 'oblik/components/loader'

let w = new Watcher(document.body, {
	components: {
		loader: Loader
	}
})

w.init()

If you want to have page transitions, all you have to do is extend the Container subcomponent. It has animateIn() and animateOut() methods which should return a Promise that resolves when the animation has finished. By default, they return an already resolved Promise (no animation). But here, we'll add a class that applies a CSS animation and use the promiseAnimation() method to return a Promise that resolves when the animationend event is fired:

<div ob-loader>
	<nav>
		<span>Navigation</span>

		<div ob-loader-nav>
			<a class="is-active" href="/examples/loader-animated">Foo</a>
			<a href="/examples/loader-animated/bar">Bar</a>
		</div>
	</nav>

	<div ob-loader-content>
		<h1>Foo</h1>

		<p>Vivamus eu volutpat enim. Proin …</p>
		<p>Integer ligula eros, mattis ac …</p>
		<p>Sed eget imperdiet nulla. Vestibulum …</p>
	</div>
</div>

@keyframes slide-in {
	0% { transform: translateY(15%); opacity: 0; }
	100% { transform: translateY(0px); opacity: 1; }
}

@keyframes slide-out {
	0% { transform: translateY(0px); opacity: 1; }
	100% { transform: translateY(-15%); opacity: 0; }
}

.is-animate-in {
	animation-name: slide-in;
}

.is-animate-out {
	animation-name: slide-out;
}

[ob-loader-nav] {
	animation-duration: 0.3s;
}

[ob-loader-content] {
	animation-duration: 0.6s;
}

[ob-loader-nav], [ob-loader-content] {
	animation-timing-function: ease;
	animation-fill-mode: both;
}

import { Watcher } from 'oblik'
import { Loader, Container } from 'oblik/components/loader'

class Content extends Container {
	animateIn () {
		this.$element.classList.add('is-animate-in')
		return this.promiseAnimation()
	}

	animateOut () {
		this.$element.classList.add('is-animate-out')
		return this.promiseAnimation()
	}
}

class Nav extends Content {
	// Uses the same logic as the first container.
}

Loader.components.content = Content
Loader.components.nav = Nav

let w = new Watcher(document.body, {
	components: {
		loader: Loader
	}
})

w.init()

A useful side effect is that thanks to the Watcher, all Oblik components are automatically initialized and destroyed when added/removed from the page. This greatly reduces complexity and the chance for memory leaks.

# Components

Note: You can have as many containers as you need.

# Options

# scroll.duration

Duration for the scroll animation. Setting this to 0 disables the animation.

Default: 1000

# scroll.easing

Easing for the scroll animation.

Default: easeOutQuint

← Height Masonry →