Snap to specific labels, possible?

[tobiasger_]

I'm playing around a bit with ScrollTrigger and labels, and I was wondering if it's possible to exclude some labels when using snap: {snapTo: "labels"}? Some labels are more for timing in the animation itself while some would serve a better purpose as snapping points or both. For example, I have one label that is set in the beginning of an animation, while the label set at the end of the animation would make more sense as the snapping point.

I know that you can have an array instead of a string for snapTo, what is that array expected to contain?

[OSUblake]

Hi tobiasger,

 

You can't ignore labels, but it's only going to look for labels on the timeline that has the ScrollTrigger. You can add other timelines with their labels to it. Ex.

 

tl.add(anotherTimelineWithLabels)

 

14 hours ago, tobiasger_ said:

I know that you can have an array instead of a string for snapTo, what is that array expected to contain?

 

They are ratios for the scroll distance of your trigger. So given this array...

[0, 0.1, 0.5, 0.8, 1]

 

It's going to snap at 0%, 10%, 50%, 80%, and 100%.

 

[GreenSock]

For fun, here's a helper function that you can feed a timeline to and an Array of labels and it'll return the progress values for just those labels: 

 

function labelsToProgress(timeline, labels) {
	let progress = [];
	labels.forEach(label => progress.push(timeline.labels[label] / timeline.duration()));
	return progress;
}

Example:

let tl = gsap.timeline();
tl.to({}, {duration: 6}).add("label-1", 1).add("label-2", 2).add("label-3", 3);

console.log(labelsToProgress(tl, ["label-1", "label-3"])); // [0.1666, 0.5]

I hope that helps.