Scroll Triggered Toggle JS

DisplayToggle.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);
	}