Hello everyone I need a simple solution. This is my website http://araf.dynamicflowdev.com. I want to the parallax run with the sidebar scroller.
Now what's happening now:
When I scroll down full section goes up. But I don't want this.
What I want:
I want when user scroll, every section will go up as scroll. Not the full section. I don't want to scroll full section. I want something like this site https://nagama.digital/
On that website, scrolling is too smooth and works perfect. I want something like that.
I want the smooth scroll. Here is my js code:
gsap.to(".custom_panel:not(:last-child)", {
backgroundPosition: `20% ${+innerWidth / 60}px`,
yPercent: -100,
ease: "slow",
stagger: .5,
scrollTrigger: {
// markers: true,
trigger: "#content",
start: "top top",
end: "+=300%",
scrub: 8,
pin: true
}
});
gsap.set(".custom_panel", {zIndex: (i, target, targets) => targets.length - i});
Here is my css code:
#content {
width: 100vw;
height: 100vh;
position: relative;
top: 0;
left: 0;
overflow: hidden;
}
.custom_panel {
position: absolute !important;
will-change: transform;
min-height: 100vh;
}
Here is my view:
http://araf.dynamicflowdev.com