Jump to content
GreenSock

GreenSock last won the day on May 18

GreenSock had the most liked content!

GreenSock

Administrators
  • Posts

    21,842
  • Joined

  • Last visited

  • Days Won

    769

Everything posted by GreenSock

  1. I'm so confused - that's what the previous version did, right? But you said you did NOT want the purple div to scroll up when the animation finished. Or did I misunderstand?
  2. That's because you placed your first tween pretty far away from the start of the timeline. Your position parameter was "+=60%". But don't you want the first one to be butted up to the very start? You could do this for your position parameter: i ? '+=60%' : 0 You could simplify a lot of your code too by just using one timeline: https://codepen.io/GreenSock/pen/WNYbqdZ?editors=0010 Is that what you were looking for?
  3. Oh, that's even easier. If you're using position: fixed, you don't even need to do any pinning at all: https://codepen.io/GreenSock/pen/jOQEjyL?editors=1010 Is that what you want?
  4. @Kenny Timber can you provide an example that shows "React's animation API" performing better than GSAP? And what exactly do you mean by "React's animation API"? I'm definitely not a React guy so I could be wrong, but my understanding is that it's a common misperception that you're not supposed to ever animate the DOM directly. That's what GSAP does, of course. And going through React to do that would actually make it much slower. People seem to think that React is super fast and one must always do things through React but I think that may be incorrect, at least in many cases.
  5. No, @7dots, gsap.matchMedia() doesn't use ResizeObserver at all. ScrollSmoother does, but only if it's supported in that particular browser. So you definitely shouldn't be seeing any errors like that from any GSAP-related stuff. I bet you're referencing ResizeObserver somewhere in your code(?) It's tough to troubleshoot blind, though - if you still need some help just post a minimal demo and we'd be happy to take a peek at anything GSAP-specific.
  6. Yep, @mvaneijgen is exactly right. It's almost never a good idea to animate the pinned element, but the bigger issue here was that you set position: fixed on that element. Let's say an element gets pinned for 100px...that means that when it gets UNPINNED, it must get a transform: translateY() applied to offset its natural position by 100px. In your situation, though, you had position: fixed, so it would get locked to the viewport itself, and that transform shifted it off-screen. https://codepen.io/GreenSock/pen/PoxwgpQ Side note: I noticed you're using a pretty old version of GSAP. I'd recommend updating Good luck!
  7. Thanks for posting back here about what you discovered, @yumyo. Sorry about the speed bumps you encountered. I'm sure it's a bit annoying, but just using the gsap-trial package on Stackblitz is probably the easiest route and allows you to avoid getting an Enterprise Stackblitz plan. Thanks for being a Club GreenSock member! 🥳
  8. Yeah, ScrollTrigger automatically checks to see if the window, document, and body exist and it'll only do that style stuff on the <body> if they all do exist. So it's definitely not a matter of trying to edit something that doesn't exist yet.
  9. I noticed several problems: You created only ONE timeline and then you're attaching that same timeline to a bunch of ScrollTriggers (one for each section). That's definitely a mistake - each ScrollTrigger would be trying to fight for control of the same timeline and make it go to different places. I assume you wanted to create a different timeline for each section (in your loop) Your start/end values look very odd to me. You're using a pretty short element, a <span> with only a small amount of text like "step I" and telling the ScrollTrigger to start when the top of that hits 40% down from the top of the viewport which is fine, but you're telling it to end when the bottom of that element hits the bottom of the viewport which would actually happen BEFORE the start! I'm not sure what you were trying to accomplish there, but maybe you meant to set end: "bottom top"? Are you trying to make the element animate to yPercent: 0 with an ease, and then immediately go to yPercent: -100 with another ease? tl.to(purchaseImages[idx], { yPercent: 0, duration: 3.7, }) .to(purchaseImages[idx], { yPercent: -100, duration: 3.7, }) I wonder if you actually meant to animate that linearly to -100 in which case you could do that with a single tween and ease: "none" If you still need help, please be very specific about what you want and what is broken, and try to keep it as isolated and simple at a time (don't list 5 requirements and try to accomplish them all at the same time - just do baby steps and solve one issue at a time). Good luck!
  10. Indeed, that's why I suggested moving it into the useEffect() We can't do that inside GSAP itself because we can't introduce a React dependency - GSAP is completely framework agnostic and dependency-free.
  11. Did you do that OUTSIDE the useEffect() though? That was the whole point - when you register the plugin, it has to do some setup stuff, some of which involved the <body> style. It looks like you did your test INSIDE the useEffect(), so it's exactly the same thing as moving gsap.registerPlugin() inside there too. Try doing your test outside the useEffect() and I bet you'll see what I mean.
  12. Just an update: this clamp() feature is now officially baked into 3.12 which was just released. We'll probably announce it more widely next week. 🥳
  13. I don't understand - I showed you a demo that disables the ScrollTrigger. It literally calls disable(). Can you please elaborate on what you're asking? Sorry, I'm a bit lost. Why would you re-enable the ScrollTrigger...but not want it to update its progress appropriately?
  14. @annarack 3.12 is released. You can get it now. We'll probably announce it more broadly next week.
  15. By the way, 3.12 is available now. We'll be announcing it probably next week. 🥳
  16. Yep. And just to explain what's going on, ScrollTrigger protects against various problems by setting a few CSS properties on the <body>. Apparently Next.js complains about that...but only on the first (SS) render. 🤷‍♂️ Pretty weird. You're using the latest version of GSAP/ScrollTrigger, right?
  17. In the vast majority of cases, you can absolutely use class names for GSAP-related stuff - that's precisely what the "scope" parameter is for in gsap.context(). If you're using React, trust me, gsap.context() is your new best friend. It makes cleanup super easy too. See this article: So basically... let root = useRef(); useLayoutEffect(() => { let ctx = gsap.context(() => { gsap.to(".my-class", {...}); // all your GSA-related code in here... }, root); // <-- SCOPE!!! return () => ctx.revert(); // cleanup }, []); return ( <div ref={root}> <div className="my-class"></div> </div> </div> ); You only have to use a ref for the root. Then use that for the scope, and then all your selector text inside the gsap.context() will only get descendants of that element. Have fun!
  18. Just move your gsap.registerPlugin(ScrollTrigger) into the useEffect()/useLayoutEffect() and you should be fine. It is indeed annoying that Next.js throws that error. It's not a problem with GSAP/ScrollTrigger. Does that solve things for you?
  19. What do you mean? Are you talking about the fact that the associated animation gets updated according to the current scroll position? That's exactly what's supposed to happen. Logically, it must, otherwise the progress would be inaccurate.
  20. Hey Tom! Just to be clear about why your original solution wasn't working - your calculations with getBoundingClientRect() were assuming that the elements where all in their original positions, but if you refresh when you're further down (part-way into the animation), that wouldn't be the case AFTER the refresh. Those values would be different. So Carl's/Rodrigo's solutions work because it's happening at the proper time when those things are temporarily reverted (part of ScrollTrigger's refresh() involves rolling everything back to the original state with no pinning, going back to a scroll position of 0, etc. just so that everything gets calculated properly, top-down).
  21. Could you elaborate a bit on what exactly you're trying to solve? There are several things we've added to help address these challenges: ScrollTrigger.config({ ignoreMobileResize: true }); And: ScrollTrigger.normalizeScroll(true); Does that help?
  22. Do you mean like this?: https://codepen.io/GreenSock/pen/WNYNPjw?editors=0010 (click to toggle)
  23. Sorry about that, @dadostudio. It was a regression in ScrollTrigger 3.12.0 and it should be fixed in 3.12.1 which is already pushed out. Better?
  24. Very sorry about the confusion there, @shaderbytes! That was indeed a regression in 3.11.5 and it has been fixed in 3.12.0 which was just released a few minutes ago Upgrade and you should be all set. ✅
  25. Sorry to hear about the headaches, @johnrnagle. I'm not aware of any issues like that, but we can't really troubleshoot live sites for free in these forums - there are way too many variables/factors. Plus you'd need to be much more specific about what exactly you mean by "conflicts that lead to unexpected behavior, broken animations, or even site crashes". What unexpected behavior? What exactly breaks about the animations and how can it be reproduced? Same for site crashes. You'll have the best chance of getting a solid answer here if you can provide an isolated minimal demo, like in CodePen or Stackblitz. Or if you'd like to explore paid consulting options, you can contact us directly for that. In terms of conflicts, I would definitely recommend checking to make sure you don't have any CSS transitions/animations applied to the same elements that you're trying to animate with GSAP. And obviously I'd recommend just loading the latest version of GSAP whenever possible.
×