newyorker

Yes, i've removed them all. I also tried taking all the code from Codepen, and run it on a separate workspace to see if the issue was due to the code in my project, but i still get the same problem. If you seem to make it work, then maybe it's me thats doing something wrong with the implementation.

You've described the issue way better than i did, sorry for the poor explanation, i'm still learning. I was really excited when i saw will-change: transform, opacity but unfortunately i still get the same problem with the updated code. I've tested it on both safari, and chrome on mobile, so I think it's an issue with mobile browsers like you said.

Hi everyone, I'm trying to use the animations on this demo for my website. But i've noticed a little bug, on desktop everything works perfectly, but on mobile doesn't seem to be working properly. On mobile animations play smoothly when they are shown for the first time on the page, but onEnterBack:() animations doesn't seem to be hidden, and they are replayed as they come back to view again, causing a glitchy, flashing effect. I wasn't sure if the problem was in my code, or the browsers I've tested on. So i went on to https://greensock.com/gsap/ on my mobile device which is using a very similar animation, and the same thing appears on the website as well. I've managed the reveal from left, and right effect without a problem using: gsap.registerPlugin(ScrollTrigger); let imagesLeft = gsap.utils.toArray('.fromLeft'); imagesLeft.forEach((item, index) => { let timeLine = gsap.timeline({ scrollTrigger:{ trigger: item, toggleActions: "play reverse play reverse" } }); timeLine.from(item, { x: -100, opacity: 0, duration: 1 }); }); let imagesRight = gsap.utils.toArray('.fromRight'); imagesRight.forEach((item, index) => { let timeLine = gsap.timeline({ scrollTrigger:{ trigger: item, toggleActions: "play reverse play reverse" } }); timeLine.from(item, { x: 100, opacity: 0, duration: 1 }); }); which works perfectly on mobile as well. But i couldn't achieve the effect used on the texts, and the headers where they appear depending on the scroll direction. I was hoping if someone could help me out solving this problem so the text, and header animations work properly on mobile devices? Thank you.

Hi again, I've recently discovered that the scrolling issue is resolved when i remove overflow-x from the media queries (I'm not really sure why). In my case removing them does the trick but, this isn't something i'd like to remove as it causes the screen to scroll on x-axis, so i will be looking into a solution to resolve it without removing overflow. I just wanted to put this here, maybe this information might be useful for others as well. @media screen and (max-width: 768px) { html, body { overflow-x: hidden; } }

Hi, thank you for the reply. I dont have smooth-scrolling on the website, it was intended but then removed, but i see that i still have the attributes in the html, but they werent causing the issue. I'm only using bootstrap and GSAP thats why i wanted to ask if this was a common issue. I'll try to create a minimal demo.

Hi everyone, I'm currently working on a project, and I'm having a problem with ScrollTo Plugin. Everything works on desktop, but on mobile when i click on the button to scroll down to a section, it starts to scroll but then stops and stays on the same page, and when i manually scroll after clicking the button, it messes up the other animations on the page, and all the elements that animate with ScrollTrigger disappears. $("#contact a").click(function(e) { e.preventDefault(); gsap.to(window, 2, {scrollTo: {y:'#home', autoKill:false}, ease: Power4.easeInOut}); }); $(".cta").click(function(e) { e.preventDefault(); gsap.to(window, 2, {scrollTo: {y:'#about img', autoKill:false}, ease: Power4.easeInOut} ); }); $(".slide").click(function(e) { e.preventDefault(); gsap.to(window, 2, {scrollTo: {y:'#home', autoKill:false}, ease: Power4.easeInOut} ); }); I've added the autoKill:false but it doesnt make any difference, and in the codepen i've posted everything seems to be working fine both on mobile and desktop. Nothing shows up on console, and I couldn't quite figure out why this is happening and i was hoping if someone can take a quick look at my code, and point me into the right direction. I've added the codepen just to show how i'm using the ScrollTo Plugin. Here's the live link to my project :https://yigitaksoy.github.io/monochrome-prep/index.html Thank you.

Hi @akapowl, thank you so much for helping me again, i was actually aware of const locoScroll = new LocomotiveScroll({ el: document.querySelector(".smooth"), smooth: true, //smoothMobile: true smartphone: { smooth: true }, tablet: { smooth: true }, }); and i tried to use something similar, when i was first trying to implement locomotive-scroll, but didn't have any luck. Thats probably because my setup wasn't correct back then, and they recently updated the library. I've been overwhelmed by all the documentation that i was going through for this project, and it didn't occur to me to try it again after updating the code. Now everything works seamlessly, and how they should. Thank you again for taking your time to help me solve this issue & happy tweening! 🙂

Hi @akapowl, thank you so much for your reply, and help. That's exactly what i was trying to do! Your code, and removing the data-scroll attributes from the img fixed the issue. The only thing i've realized is that after updating the code, everything works perfectly on desktop, but this time website and the menu doesn't function well on mobile. GSAP tween is not triggering, and when you click on any of the menu links, you get stuck like before. In the console i can see that it logs the target when you click on the menu item, but it doesn't go anywhere. I've tried adding: pinType: document.querySelector(".smooth").style.transform ? "transform" : "fixed" and removing all the locomotive-scroll attributes such as "data-scroll data-scroll-speed="-1" but no luck. I know this topic isn't really related to GSAP, so i wont be bothering anyone about this new issue, but thank you again for your help 🙂.

Hi everyone, I'm new to the community, but been a huge fan of GSAP which i've just started to get into. I'm currently working on a school project, and trying to implement Locomotive scroll with Scrolltrigger. The issue that im facing is when I enable locomotive scroll, everything seems to be working fine, but when i select and go to a specific page from the menu, user gets stuck in that page, I've also realized that gsap animation that is triggered is also acting a bit strange on scroll, and i cant seem to get it working properly. The site functions normal without the locomotive scroll. I've added a rough draft of my project to give some idea of what i'm doing. I'm fairly new to javascript, and i'm not really sure if my implementation is correct, and i would really appreciate if someone could point me into right direction to setup Scrolltrigger and Locomotive scroll to work properly. Thank you & happy tweening 🙂