Skip to content

Instantly share code, notes, and snippets.

@rafibomb
Created December 22, 2021 18:21
Show Gist options
  • Save rafibomb/20648329942010563bb3e777cc08ab3c to your computer and use it in GitHub Desktop.
Save rafibomb/20648329942010563bb3e777cc08ab3c to your computer and use it in GitHub Desktop.
Trainers Gallery
[
[this.galleriesRowTop, this.timelineGroups[0]],
[this.galleriesRowBottom, this.timelineGroups[1]],
].forEach(([galleries, timegroup]) => {
galleries.forEach(gallery => {
timegroup.addKeyframe(gallery, {
start: 0,
end: "css(--gallery-duration)",
x: ["css(--gallery-gap)", "-1 * (css(--gallery-count) * (css(--gallery-item-width) + css(--gallery-gap))) + css(--gallery-gap)"],
disabledWhen: ['static-layout'],
easeFunction: "linear"
});
});
requestAnimationFrame(() => {
const start = parseFloat(getComputedStyle(galleries[0]).getPropertyValue('--gallery-start')) || 0;
const count = parseInt(getComputedStyle(galleries[0]).getPropertyValue('--gallery-count'));
timegroup.progress(start/count);
});
});
}
_updatePlayState() {
if (this.playing && this.visible) {
this.timelineGroups.forEach(tg => tg.play());
} else {
this.timelineGroups.forEach(tg => tg.pause());
}
}
togglePlayback(event) {
if (this.playbackControls.classList.contains("play-button")){
this.playbackControls.classList.remove("play-button");
this.playbackControls.classList.add("pause-button");
this.playbackControls.dataset.analyticsTitle = this.playbackControls.dataset.analyticsTitle.replace(/\bpause\b/g, "play");
this.playbackControls.dataset.analyticsClick = this.playbackControls.dataset.analyticsClick.replace(/\bpause\b/g, "play");
this.playbackControls.setAttribute("aria-label", this.playbackControls.getAttribute('aria-label').replace(/\bPlay\b/g, "Pause"));
this.playbackControls.childNodes[1].textContent = "Pause";
this.playing = true;
} else if (this.playbackControls.classList.contains("pause-button")) {
this.playbackControls.classList.remove("pause-button");
this.playbackControls.classList.add("play-button");
this.playbackControls.dataset.analyticsTitle = this.playbackControls.dataset.analyticsTitle.replace(/\bplay\b/g, "pause");
this.playbackControls.dataset.analyticsClick = this.playbackControls.dataset.analyticsClick.replace(/\bplay\b/g, "pause");
this.playbackControls.setAttribute("aria-label", this.playbackControls.getAttribute('aria-label').replace(/\bPause\b/g, "Play"));
this.playbackControls.childNodes[1].textContent = "Play";
this.playing = false;
}
this._updatePlayState();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment