Hello community,
I'm a complete beginner, but have implemented a vertical scroll on my Website (Scroll down to the end of the page).
Currently, there are still placeholder images, but soon there will be 8 images, each representing one layer of a mat, we are selling soon. That's why I want to scroll through the images.
I would be thankful, if someone could help me with 2 things:
1. Probably simple to solve, but I can't: Scrolling down through the images works fine. But when I reverse my animation by scrolling back up, there is a short "entry/exit" animation. I use Elementor, I couldn't really copy it in CodePen, but I made a short video here: Loom Video I just want to neatly switch between the normal website scrolling and image scrolling in the section.
2. On the right side, there are 8 textboxes, each with the class "description-1", "description-2", etc. My goal is to highlight one text at the time, which is linked to the image. So if Image 3 is visible, text 3 should be highlighted. I tried a lot to solve it, but I just can't get the hang of it.
This is my current code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
gsap.registerPlugin(ScrollTrigger);
gsap.set(".panel", { zIndex: (i, target, targets) => targets.length - i });
var images = gsap.utils.toArray(".panel:not(:last-of-type)");
console.log(images);
const tl = gsap.timeline({
scrollTrigger: {
trigger: "#animation-section",
markers: true,
pin: true,
start: () => "top top",
end: () => "+=" + (images.length + 1) * window.innerHeight,
invalidateOnRefresh: true,
scrub: true
}
});
var _images = gsap.utils.toArray(".panel");
_images.forEach(function (section, index) {
console.log(section);
ScrollTrigger.create({
trigger: section,
start: () => "+=" + index * window.innerHeight,
end: () => "+=" + (index + 1) * window.innerHeight,
markers: true,
animation: gsap.timeline({
scrollTrigger: {
trigger: section,
start: () => "top top",
end: () => "+=" + (index + 1) * window.innerHeight,
scrub: true,
immediateRender: false
}
})/*
.to(`.description-${index + 1}`, {
className: "+=highlighted-text"
})
.to(`.description-${index + 2}`, {
className: "-=highlighted-text"
})*/
});
});
images.forEach((image, i) => {
tl.fromTo(
image,
{
yPercent: 0,
opacity: 1
},
{
xPercent: 0,
yPercent: -100,
rotateZ: 0,
opacity: 0,
duration: 0.5
},
"+=0.1"
);
});
tl.set({}, {}, "+=0.1");
});
</script>
Solving Number 1 would be very important for me, Number 2 would be awesome to include, but hasn't (yet) been asked from my contractor.