@Rodrigo
I've added anchors to each section with text
is it possible to navigate to the correct section when you click on an anchor from another page?
I've changed the code slightly, but I'm not quite sure how to affect timeline
const images = gsap.utils.toArray(services.querySelectorAll('.media-wrap'));
const texts = gsap.utils.toArray(services.querySelectorAll('.text-wrap'));
if(images.length > 1 && texts.length > 1 ) {
const heights = []
texts.forEach((text, i) => {
gsap.set(texts[i + 1], { y: `${texts[i].scrollHeight}`});
heights.push(text.scrollHeight)
})
const heightSum = heights.reduce(
(accumulator, currentValue) => accumulator + currentValue
);
function fadeImage(index) {
if (tl.scrollTrigger.direction > 0) {
gsap.to(images[index], { opacity: 0 });
if (images[index + 1]) {
gsap.to(images[index + 1], { opacity: 1 });
}
} else {
gsap.to(images[index], { opacity: 1 });
if (images[index + 1]) {
gsap.to(images[index + 1], { opacity: 0 });
}
}
}
let tl = gsap.timeline({
defaults: {
ease: "none"
},
scrollTrigger: {
trigger: ".animation-wrap",
scrub: true,
pin: true,
start: () => "top top",
end: () => "+=" + heightSum
//end: () => "+=" + texts.length * 200 + "%"
}
});
function scrollToHash(hash, e) {
const elem = hash ? document.querySelector(hash) : false;
if (elem) {
if (e) e.preventDefault();
//ScrollSmoother.get().scrollTo(elem, true);
gsap.to(window, {
duration: 1,
scrollTo: elem,
ease: "Power1.easeInOut"
});
}
}
document.querySelectorAll("a[href^='#']").forEach((a) => {
a.addEventListener("click", (e) => {
e.preventDefault();
scrollToHash(a.hash);
window.history.pushState({}, "", a.hash);
});
});
window.addEventListener("load", refreshScroll);
function refreshScroll() {
document.querySelector("#smooth-content").scrollTop = 0;
window.scrollTo(100, 100);
ScrollTrigger.refresh();
console.log("refresh", window.location.hash);
// Scroll to the element in the URL's hash on load
scrollToHash(window.location.hash);
}
scrollToHash(window.location.hash);
texts.forEach((text, i) => {
console.log('all:', text)
if (i && i !== texts.length - 1) {
console.log('not first:', text)
tl.to(text, { y: 0 }, "<")
.to(text, {}) // conditionally scroll here
//.to(text, { yPercent: -100 })
.to(text, { y: `-${text.scrollHeight}` })
.call(fadeImage, [i], "<");
} else if (i === 0 ){
console.log('first:', text)
tl.to(text, {}) // conditionally scroll here
.to(text, { y: `-${text.scrollHeight}` })
.call(fadeImage, [i], "<");
} else {
tl.to(text, { y: 0 }, "<")// conditionally scroll here
}
});
const parent = services.querySelector('.element.left');
texts.forEach((text, i) => {
if(text.contains(images[i])) {
const movedImages = text.querySelector('.media-wrap')
parent.append(movedImages)
}
})
}