Hi, thank you for sharing! May I as you two questions?
With your code updated, is there a way to add a pin inside one of the slide?
(For example, I'm trying to pin a nav menu from secondo slide until end! Is this theoretically possible?)
And, I'm trying to use this example (https://codepen.io/GreenSock/pen/bGVjLwG?editors=1111) to implement your horizontal scrolling with a nav menu. I manage to scroll to the right position using gsap.to against horizontal scroll container (not against window object), but I can't keep vertical scrollbar in sync with my elements. I'm sure this is conceptually wrong, but I can't imagine a different way
gsap.registerPlugin(ScrollTrigger)
gsap.registerPlugin(ScrollToPlugin);
// your horizontal scrolling
gsap.to(container, {
x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px",
ease: "none",
scrollTrigger: {
trigger: container,
invalidateOnRefresh: true,
pin: true,
scrub: 1,
end: () => "+=" + container.offsetWidth
}
})
// edited nav code from other example
gsap.utils.toArray("nav a").forEach(function(a) {
a.addEventListener("click", function(e) {
e.preventDefault();
const el = document.querySelector(e.target.getAttribute('href'))
console.log(el.getBoundingClientRect())
console.log(container)
gsap.to(container, {
duration: 1,
x: -(el.getBoundingClientRect().x)
/*scrollTo: {y: el.getBoundingClientRect()}*/
});
});
});
