Sometimes, you want something to change when you scroll down a page.
What’s more, you want it to change based on how far down you’ve scrolled.
That’s a tween! And tween-titan makes them easy.
It can interperpolate styles between any number of waypoints.
By default, it tracks an element’s vertical viewport position and applies the tween accordingly —like with this spinning atom:
const shape = document.querySelector('#shape');
const tween = TweenSelf.create({
target: shape,
waypoints: [
{
percent: 0,
style: 'transform: rotate(0deg)',
},
{
percent: 1,
style: 'transform: rotate(480deg)',
},
]
});
You can also tween an element based on the position of other elements on the page.
This way, you can have a sticky object that tweens based on when other elements enter the viewport.
const speeder = document.querySelector('#speeder');
const waypoint1 = document.querySelector('#waypoint-1');
const waypoint2 = document.querySelector('#waypoint-2');
const waypoint3 = document.querySelector('#waypoint-3');
const waypoint4 = document.querySelector('#waypoint-4');
const tween = TweenWaypoints.create({
target: speeder,
waypoints: [
{
elem: '#waypoint-1',
style: { left: 'calc(0% - 0px)' },
},
{
elem: '#waypoint-2',
style: {
left: 'calc(100% - 135px)',
fill: '#F9C80E',
backgroundColor: '#662E9B',
transform: 'rotate3d(0,1,0, 0deg)',
},
},
{
elem: '#waypoint-3',
style: {
fill: '#662E9B',
backgroundColor: '#F86624',
transform: 'rotate3d(0,1,0, 180deg)',
},
},
{
elem: '#waypoint-4',
style: { left: 'calc(0% - 0px)' } },
],
});
If you want, you can skip supplying CSS altogether and pass a function instead.
It’ll run when your object is getting tweened and pass a percent value — the rest is up to you!
You might advance a video frame-by-frame, for instance...
const shape = document.querySelector('#video');
const tween = TweenSelf.create({
target: video,
stepFunction: (percent, style, target) => {
const max = target.duration;
// Doing this calculation so
// the video loops more than once 👇
const pct = ((percent * 300) % 100) / 100;
target.currentTime = pct * max;
},
});