newyorker

Thank you so much @Rodrigo, this is great. I will also definitely check out @Carl's tutorial.

Hi everyone, I'm developing an animation for a set of divs that dynamically display Weather data fetched from an API. The goal is to create a seamless looping animation where three elements (st1, st2, st3) fade in and out in sequence, creating an overlapping carousel effect. The challenge I'm facing is with the transition from st3 back to st1 in the looping sequence. On the first loop, the transition from st1 to st3 is smooth and works as expected. However, in subsequent loops, st1 seems to restart and plays its fade-in animation again, which disrupts the flow. I know this is a very simple issue, but I just couldn't manage to create a seamless loop, and would really appreciate if someone can help me out. Here's my minimal StackBlitz demo for reference: https://stackblitz.com/edit/nextjs-zjgmib?file=pages%2Findex.js Thank you in advance.

Thank you for your response @Rodrigo , this is indeed the animation I wanted to achieve! I've took your advice, and implemented GSAP Context into my component along with your solution. After making all the changes I've encountered a specific issue that I'm still trying to resolve. Issue: When a user scrolls down rapidly from the top of the page, the navbar does not hide, and the hide/show animation does not trigger. In contrast, when scrolling slowly, the animation functions without any problems. Observations and Assumptions: I believe the issue might be related to the conditional application of CSS transitions in my component. Specifically, the transitions for certain navbar properties are controlled by the enableTransition state. This state is set to true after the user scrolls past a certain threshold, which in my case is 500px. The problem seems to occur only with rapid scrolling from the top, suggesting it might be linked to how the state change interacts with the ScrollTrigger or the speed of the scroll event. Given these observations, I'm wondering if there's a recommended approach to ensure that the navbar's hide/show animation is triggered consistently, regardless of the scroll speed. Is there a way to optimize the interaction between GSAP animations, React state changes, and CSS transitions to address this fast-scroll scenario? I've also created a new demo which contains the new implementation which can be found here: https://stackblitz.com/edit/nextjs-l5mhei?file=components%2FNavbar.jsx

Hi everyone, I'm working on implementing a hide/show effect on my Navbar based on scroll direction, inspired by the navbar animation I saw on this website. My current implementation works fine, but my hide/show animation doesn't quite capture the same feel as the example. I'd really appreciate it if someone could guide me in the right direction to replicate this animation more effectively. Thank you in advance. Example: https://wethinkelastic.com/expertises.html StackBlitz demo: https://stackblitz.com/edit/nextjs-xgurhv?file=components%2FNavbar.jsx

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 ?