Chayut.

This interaction is best seen on desktop. It is inspired by the work page of Kin studio’s site. You can use the pointer to navigate the list. When hovered, we see a transition of title overlay, the subtitle text fades in, and the corresponding image appears on the right side.

This is achieved by translating the list and image container depending on the mouse y-position. We then track the active item and changes the UI states accordingly. The animation is made smooth with GSAP.