Slingshot Elastic Stretch Toggle

The Slingshot Elastic Stretch Toggle is an experimental UI switch that utilizes exaggerated spatial movement to signal state changes. It replaces the standard sliding thumb with a “dual-handle” system that appears to shoot across the viewport using a high-velocity slingshot effect. Its function is to provide an high-energy alternative to traditional toggles, making a simple boolean selection feel like a physical, kinetic event.

Specs

• Weight: 4.2 KB (CSS + JS).
• Performance: High. Uses GPU-accelerated transform and opacity properties.
• Theming / Customization: Managed via :root variables (--hue, --trans-dur).
• Responsiveness: Fluid. Uses calc() and vw units to scale dimensions relative to the screen width.
• Graceful Degradation: Fails back to a standard checkbox. The toggle--pristine class prevents the “off” animation from firing on initial page load.

Anatomy

The component is engineered to simulate depth and velocity across the entire viewport.

• HTML (The Skeleton): A <label> wrapping a native checkbox and two structural spans (.toggle__stretch-left, .toggle__stretch-right) used to draw the background trail.
• CSS (The Skin): Leverages ::before and ::after on the checkbox to create two distinct handles. One “exits” the screen while the other “enters” with high momentum.
• JS (The Nervous System): A simple ES6 class that removes the pristine class on the first interaction, unlocking the animation sequence only when the user intends to change state.

Logic

The core mechanism is “Viewport-Wide Handle Swapping”.

.toggle__input:after {
	animation: handleOffB var(--trans-dur);
	right: 0.25em;
	transform: translateX(50vw);
}

Instead of moving a single circle from left to right, the component uses two circles. When the state changes, the active circle shoots off-screen to a distance of 50vw, while its counterpart (previously hidden at 50vw) rushes in from the opposite side. Combined with the synchronized horizontal scaling of the background spans, this creates the illusion of a single handle being stretched until it snaps and flies across the track.

Feel

Aggressive and elastic. The one-second transition duration (--trans-dur: 1s) allows the viewer to register the build-up of tension before the snap. It feels less like a software switch and more like a mechanical part under high spring load. The recoil effect at the end of the handleOnB keyframes adds a final tactile “click” to the motion.