Offset feature

[electerious]

See #15

[adeoh]

Also could work to add points in between the actual relative position values

[sjelfull]

Any idea on how to hack this in?

[pngarland]

@sjelfull this worked for me: 8dbca50

[electerious]

Recommended solution

A custom anchor can be used to adjust from and to of an element.

Anchor = Orange; Elem = Gray

.elem {
	position: relative;
}

.anchor {
	position: absolute;
	top: -100px;
	left: 0;
	right: 0;
	bottom: -100px;
	pointer-events: none;

	/* For debugging */
	right: 50%;
	background: orange;
	opacity: .5;
}

<div class="elem">
	<div class="anchor"></div>
</div>

basicScroll.create({
	elem: document.querySelector('.anchor'),
	from: 'top-bottom',
	to: 'bottom-top',
	direct: document.querySelector('.elem'),
	props: {
		'--opacity': {
			from: .01,
			to: .99
		}
	}
})

This will change --opacity from 0.01 to 0.99. It starts when the top of the anchor is at the bottom of the viewport and ends when the bottom of the anchor is at the top of the viewport. The anchor starts 100px in front of the element and 100px after the element thanks to the size specified in the CSS.

See direct mode for more details.