First of all, thank you for replying. I'm sorry if my logic was too difficult to grasp. After rebuilding everything from scratch and a lot of consoles.log, I managed to solve the problem myself, and I thought my solution might be useful to anyone experiencing similar issues.
1. Dynamic screen size handling: The breakthrough came when I shifted from using directly gsap.matchMedia() to a more direct approach with mm.add() coupled to window.innerWidth. Here's a snippet for reference:
let mm = gsap.matchMedia(); // use this for the different methods in my class
mm.add("(min-width: 1024px)", () => {
// ScrollTrigger configurations
});
this.sections.forEach((section, index) => {
let startCondition = index > 1 && window.innerWidth >= 1024 ? "left right" : "center bottom"; // used raw js to target innerwidth
let sectionTrigger = ScrollTrigger.create({
// some scripts
horizontal: index > 1 && window.innerWidth >= 1024, // used raw js to target innerwidth
});
triggers.push(sectionTrigger);
});
});
}
2. Trigger refresh: I added an 'onUpdate' callback to the ScrollTrigger configurations to refresh triggers dynamically. This was crucial for maintaining the synchronization of animations with scrolling, particularly after layout changes. The code snippet looks like this:
onUpdate: () => triggers.forEach(t => t.refresh(false)) // at the end of scrolltrigger configuration
Hope this helps! 😄
