Hello im trying to achieve this effect with locomotive scroll Graphic hunters and here is the link to my code on GitHub and here it is live.
I tried adding this javascript for scroll trigger and I also added the locomotive scroll for some reason it seems locomotive is maybe making it not work.
gsap.registerPlugin(ScrollTrigger);
// Call this function when the DOM content has loaded
document.addEventListener("DOMContentLoaded", function() {
// Initialize other functions like initLoaderHome(), initTimeZone() as needed
initLoaderHome();
initMagneticButtons();
initTimeZone();
initBasicFunctions();
initScrolltriggerCheckScroll();
initScroll();
initScrolltriggerAnimations();
});
function initScroll() {
let scroll = new LocomotiveScroll({
el: document.querySelector("[data-scroll-container]"),
smooth: true,
lerp: 0.075,
});
scroll.on("scroll", ScrollTrigger.update);
ScrollTrigger.scrollerProxy("[data-scroll-container]", {
scrollTop(value) {
return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y;
},
getBoundingClientRect() {
return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
},
pinType: document.querySelector("[data-scroll-container]").style.transform ? "transform" : "fixed",
});
window.addEventListener('resize', () => {
scroll.update();
ScrollTrigger.refresh();
});
ScrollTrigger.addEventListener("refresh", () => scroll.update());
ScrollTrigger.refresh();
}
/**
* Scrolltrigger Animations Desktop + Mobile
*/
function initScrolltriggerAnimations() {
// Disable GSAP on Mobile
// Source: https://greensock.com/forums/topic/26325-disabling-scrolltrigger-on-mobile-with-mediamatch/
ScrollTrigger.matchMedia({
// Desktop Only Scrolltrigger
"(min-width: 1025px)": function() {
if (document.querySelector(".bg-img")) {
// Scrolltrigger Animation : Example
$(".bg-img").each(function(index) {
let triggerElement = $(this);
let targetElement = $(this);
let tl = gsap.timeline({
scrollTrigger: {
trigger: triggerElement,
start: "100% 100%",
end: "150% 0%",
scrub: 0,
}
});
tl.to(targetElement, {
opacity: 0,
ease: "Power3.easeOut"
});
});
}
}, // End Desktop Only Scrolltrigger
// Mobile Only Scrolltrigger
"(max-width: 1024px)": function() {
if (document.querySelector(".example")) {
// Scrolltrigger Animation : Example
$(".example").each(function(index) {
let triggerElement = $(this);
let targetElement = $(".example");
let tl = gsap.timeline({
scrollTrigger: {
trigger: triggerElement,
start: "0% 100%",
end: "100% 0%",
scrub: 0
}
});
tl.to(targetElement, {
rotate: 90,
ease: "none"
});
});
}
} // End Mobile Only Scrolltrigger
}); // End GSAP Matchmedia
}
but it wont work for some reason, when I apply markers: true it shows fade working but it doesnt work when no markers. I also not my locomotive code is causing that javascript I provide to not work. thats why it wont fade. I have no idea why it would do that.