Home

Elastic Clip Path

Using clip-path to recreate the luxurious, elastic image scroll effects as seen on AYANA's website. Elasticity is achieved by monitoring scroll velocity and applying progressive resistance, decay.

The viewport-relative parallax effect adds a subtle layer of depth to the scroll experience.

Elastic scroll demo image 1
Elastic scroll demo image 2
Elastic scroll demo image 3
Elastic scroll demo image 4
Elastic scroll demo image 5
Elastic scroll demo image 6
Elastic scroll demo image 7
Elastic scroll demo image 8
Elastic scroll demo image 9
Elastic scroll demo image 10

💡 Scroll inside the demo window to see the elastic effect.