When I add pin to element background of scroll is visible
Here's my code:
gsap.registerPlugin(ScrollTrigger);
function gsapanim(){
const locoScroll = new LocomotiveScroll({
el: document.querySelector(".scrollContainer"),
smooth: true
});
// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
locoScroll.on("scroll", ScrollTrigger.update);
// tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things
ScrollTrigger.scrollerProxy(".scrollContainer", {
scrollTop(value) {
return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
}, // we don't have to define a scrollLeft because we're only scrolling vertically.
getBoundingClientRect() {
return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
},
// LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
pinType: document.querySelector(".scrollContainer").style.transform ? "transform" : "fixed"
});
// TIMELINE 1
const tl1 = gsap.timeline({scrollTrigger: {
scroller: ".scrollContainer",
trigger: '.header',
start: "top top",
end: "bottom 60%",
scrub: 3,
markers: false,
id: 'header',
pin: '.header',
}
});
tl1.to('.top__logo', {
scale: 4,
opacity: 1,
ease: "none"
})
const tlcs = gsap.timeline({scrollTrigger: {
scroller: ".scrollContainer",
trigger: '.header',
start: "top top",
end: "bottom 60%",
scrub: 3,
markers: false,
pin: '.header',
}
});
tlcs.to('.top__smoke-child', {
x: "-200%",
opacity: 0,
ease: "none",
id: "header2"
})
tl1.to('.top__logo', {scale: 5, opacity: 0, duration: 0.5});
tl1.to('.header', {opacity: 0, duration: 0.1});
tl1.to('.header', {display:"none", color: "black"});
// TIMELINE 2
const tl2 = gsap.timeline({scrollTrigger: {
scroller: ".scrollContainer",
trigger: ".section--main__ui_1",
start: "-385px 28%",
end: "999px 33%",
markers: true,
toggleActions: "restart none restart none",
id: "tl2"
}
});
tl2.fromTo('.main__top_1', {opacity: 0}, {opacity: 1, duration: 1, delay: 1})
tl2.fromTo('.main__description_1', {opacity: 0}, {opacity: 1, duration: 1})
const tl3 = gsap.timeline({scrollTrigger: {
scroller: ".scrollContainer",
trigger: ".section--main__ui_2",
start: "-385px 28%",
end: "999px 33%",
markers: true,
toggleActions: "play restart restart none",
id: "tl3",
}
});
tl3.fromTo('.main__top_2', {opacity: 0}, {opacity: 1, duration: 1, delay: 1})
tl3.fromTo('.main__description_2', {opacity: 0}, {opacity: 1, duration: 1})
// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();
P.S: My container is also called "scrollContainer"