Hi Cassie,
We made our custom template and appart from some minimal style WordPress is adding the rest is basically the same as the one without WordPress.
The javascrip code is exactly the same from one page to the other.
The animation should start when the top of salmon section touches the top of the screen, and then the horizontal scroll is activated. In desktop this animation works perfectly, but on mobile the markers are not activating.
I realized that on mobile there's an horizontal scroll available (without doing any vertical scroll) and the markers are positioned at the very right of it.
Please find attached the code I used for this animation in case can add some more context to it.
let scrollTween = gsap.to(sections, {
xPercent: -100 * (sections.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".galeria",
pin: true,
scrub: true,
markers: true,
//snap: directionalSnap(1 / (sections.length - 1)),
end: `+=${container.offsetWidth}`,
// toggleClass: {targets: '.menu', className: "dark_visible"}
}
});
At the end the idea is having the same animation that is working on desktop applied to mobile.
Many thanks for your help and quick reply,
Jonas