Skip to content

Instantly share code, notes, and snippets.

@rafibomb
Created December 22, 2021 19:21
Show Gist options
  • Save rafibomb/9c0b07ce8838d1edf19d6674e50047b4 to your computer and use it in GitHub Desktop.
Save rafibomb/9c0b07ce8838d1edf19d6674e50047b4 to your computer and use it in GitHub Desktop.
Scroll Triggered Toggle JS
constructor(options){
super(options);
this.scrollGroup = this.anim.getGroupForTarget(this.el);
this.toggle = document.getElementById('toggleControl');
this.toggleS7 = document.querySelector('.toggle-label-s7');
this.toggleS3 = document.querySelector('.toggle-label-s3');
this.hardware = document.querySelector('.tile-image-wrapper');
this.imageS7 = this.hardware.querySelector('.image-display-s7');
this.imageS3 = this.hardware.querySelector('.image-display-s3');
}
/**
* Component has been mounted to the HTMLElement,
* at this point all other components have been created so they can safely be accessed
*/
mounted(){
// DOM things
let keyframe = this.scrollGroup.addKeyframe(this.el, {
anchors: this.hardware,
start: 'b - 125vh', end:'b',
event: 'autoToggeEvent'
})
keyframe.controller.on('autoToggeEvent:enter', (e) => this.setS7Active())
this.scrollGroup.addKeyframe(this.el, {
anchors: this.el,
start: videoConstants.willChange.start,
end: videoConstants.willChange.end,
cssClass: videoConstants.willChange.class,
toggle: true,
disabledWhen: ['static-layout','prefers-reduced-motion'],
});
this.handleToggle(event);
}
handleToggle(event) {
this.toggle.addEventListener('click', (event) => {
if (event.target === this.toggleS7) {
this.setS7Active();
} else {
this.setS3Active();
}
});
}
setS7Active() {
this.el.classList.add('is-showing-s7');
this.toggleS7.setAttribute('aria-pressed', true);
this.toggleS3.setAttribute('aria-pressed', false);
this.imageS7.setAttribute('aria-hidden', false);
this.imageS3.setAttribute('aria-hidden', true);
}
setS3Active() {
this.el.classList.remove('is-showing-s7');
this.toggleS7.setAttribute('aria-pressed', false);
this.toggleS3.setAttribute('aria-pressed', true);
this.imageS7.setAttribute('aria-hidden', true);
this.imageS3.setAttribute('aria-hidden', false);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment