Jonas Calvo

Hi Jack and Cassie, First of all I wanted to say thanks for all your help and being interested. I just found out what was causing the problem with my animation, when I coded the website before implementing on WordPress I defined my viewport like this: <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> And then on the implementation it changed to <meta name="viewport" content="width=device-width, initial-scale=1"> This difference was making my animation breaking in all browsers except Safari (desktop and mobile). Hehehe, won't happen again :_) thanks, Jonas

As the website without being implemented in WordPress is working, I guess must be something related to what we did on the implementation and not compatible with Chrome and Firefox. This is the minimal demo with the code we're using on the animation. https://codepen.io/jonascalvo/pen/gOeLWOq Many thanks for your support on this topic, I understand that can be a lot of things not related to Gsap

Hi Cassie, I just find out the animation is working on mobile when you're on Safari, but on Chrome and Firefox is not working. Any idea what it can be?

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

Hi again, I'm coming back with an issue I'm experimenting with this horizontal animation as soon as I'm implementing it on WordPress. The url for the website is http://larafraire.com/wp/ The animation works fine when I'm on desktop, but as soon as I'm trying it on responsive stops working. I also have it without WordPress implemented and is working perfectly (http://larafraire.jonascalvo.com/) so I guess is something related with the CMS. Has anyone an idea how I can fix it? Many thanks in advanced

Many thanks for the replies Cassie and SteveS. I will create a timeline to try to reproduce this effect. Thanks,

Hello, I'm having problems to do the animation I want with Scrolltrigger and containerAnimation. What I cannot achieve is pinning an element to activate horizontal scrolling, and then pin each element inside as the horizontal scroll is happening (the effect will be like elements going over each other). I used the containerAnimation to trigger an animation inside a triggered animation but didn't worked as I planned. Has anyone an idea how I can fix it? Many thanks in advanced, Jonas