A library of micro-interactions, GSAP experiments, and WebGL shaders.
This is the core logic used to create the side-scrolling portfolio grid on the home page. By pinning the container and translating it across the X-axis based on the scroll width, we create a seamless horizontal experience tied to vertical scroll.
let scrollTween = gsap.to(container, {
x: () => -(container.scrollWidth - window.innerWidth),
ease: 'none',
scrollTrigger: {
trigger: '.horizontal-scroll',
pin: true,
scrub: 1,
end: () => "+=" + container.scrollWidth
}
});
Using a fast bezier curve on the transition property creates a snappy, responsive feel when hovering over interactive elements.
button {
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}