Jelly Scroll JS Animation

The jelly scroll effect adds a playful, elastic deformation to elements as the page scrolls. Elements stretch and squash based on scroll velocity, creating a bouncy, organic feel.

The Physics

We use scroll velocity detection combined with CSS transforms (scaleX and skewX) to simulate elastic deformation. Spring physics ensure elements return smoothly to their original shape when scrolling stops.

Implementation

The effect is applied via a lightweight JavaScript class that monitors scroll events and applies transforms to target elements. Performance is maintained by using transforms exclusively and batching DOM reads and writes.