Jump to content

GreenSock last won the day on February 7

GreenSock had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. All of what JS? You posted a demo and then Rodrigo suggested something and you said it seems excessively complex. So are you wanting to refactor the version with Rodrigo's suggestion or your original? If you'd like some help, please post a CodePen with exactly the code you want to refactor. Sorry if I'm missing something obvious.
  2. That's totally fine. There are no such restrictions. Also, I think you can embed JavaScript directly in SVG files. A quick Google search returned: http://thenewcode.com/1094/Using-JavaScript-in-SVG I believe I did that myself years ago. Just had to do the //<![CDATA[ wrapper like the article says. You could copy the GSAP file contents into a script tag and then directly under the GSAP code, write your custom code. I assume that'd work. But it's probably a lot easier to do the <script xlink:href="external.js" /> thing if you can get away with it (again, see the article). Good luck!
  3. Trial and error. Pick the lowest common denominator (the slowest device your site must look okay on) and test. Nope. Totally your call. If I were you, I'd probably try both and see what works best. Good luck. 👍
  4. You added margin-bottom, that's why they're spaced out more. It has nothing to do with ScrollTrigger. You can eliminate ScrollTrigger completely and your spacing remains the same. Sorry, I'm still completely lost. I watched your video and I see the footprints happening on scroll. I have no idea what you think is broken or what you want to work differently. The demos I provided show the footprints happening on scroll - what's wrong? I think I've provided a lot of options for you already, so hopefully you can tweak the values to get whatever effect you want. Good luck.
  5. That error means you didn't register the plugin, so GSAP has no idea what "scrollTrigger" is inside a tween. It thinks you're literally trying to animate a property of your object that's named "scrollTrigger". The solution is hinted at in the error message itself gsap.registerPlugin(ScrollTrigger);
  6. That's not what I was implying. I think people want to help you...it's just very difficult with the info you provide, that's all. Trust me, I've experienced SOOOO many things that initially seemed this way. I was baffled. Things seemed random. And my setup was complicated. Creating a "simple" demo seemed daunting or impossible. Way too many moving parts. However, in almost every case when I pushed myself to just back up and start with the most simple basic setup (a few <div> elements) and start slowly layering on the complexity in a strategic way, I'd stumble upon the issue and it'd all suddenly make sense. The key is spending that time taking the complex broken thing and rebuilding a simpler version from scratch and then testing every time I added a small layer of complexity. BOOM as soon as it broke, I'd see what was doing it. "the problem cannot be replicated in a simple setup", I want to respectfully challenge you on that. I'd bet money it is possible. It boils down to comparing the version that worked with the one that suddenly broke when you changed your bundle configuration. SOMETHING changed somewhere. When there are 500 possible things, the key is to minimize that number, hence starting from something very simple and slowly building up to be closer and closer to your "broken" (complex) version. It's totally up to you if you want to pursue this. I'm just trying to offer you some tips on how to help us help you because as I hope you've seen, people in this community genuinely do want to help wherever we can.
  7. Would you mind elaborating a bit? What's excessively complex? Can you please provide a minimal demo that shows the code you want to refactor?
  8. That's what I've tried to explain several times, yes. ScrollTrigger does all of its measuring, pin spacer adjustments, etc. inside refresh() which is delayed by one tick when you've got a ScrollTrigger attached to a timeline (for the reasons I stated earlier). But you can force it if you know your timeline is done being populated (as I did in my fork). That's a caching performance optimization. We've put a ton of effort into making ScrollTrigger as fast as possible. Reading the scroll position can actually trigger paint/reflow in some browsers and since it's something we read a LOT, we cache it whenever possible. So technically I could add code to check it against the maximum value and cap it, but that goes directly against the performance optimization strategy. It's an edge case and I think it's reasonable to expect that people shouldn't be setting the scroll to an invalid value. It's a tradeoff, honestly. Do we want to force everyone to pay a performance penalty in order to prevent an edge case where someone sets an invalid value and tries reading it back via ScrollTrigger.scroll() and get the non-capped value? In my opinion, it's an obvious choice (performance). No problem. Glad things are less fuzzy now. 👍
  9. First of all, thanks for the minimal demo, @adam.reznicek! Super clear and very helpful. Yes, you can dynamically do stuff like that - the key is that you've gotta tell ScrollTrigger to refresh() after you've shifted things around in the DOM. That'll tell it to re-calculate the start/end values for the various ScrollTriggers. You could get fancy and do a ResizeObserver that's debounced like this: https://codepen.io/GreenSock/pen/wvxbBjX?editors=1010 Or do it in whatever way you want - the point is to wait until your DOM is done shifting around, and THEN call ScrollTrigger.refresh(). Does that help?
  10. Welcome to the forums, @nick.saigondigital Are you just talking about overscroll-behavior? https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior I couldn't replicate any problems whatsoever in Safari. I scrolled a ton. But overscroll-behavior is annoying in Safari for sure. Try disabling it in the CSS. Or am I missing something?
  11. Yeah, this isn't really a good fit for these forums, @iDad5. But if you're willing to create an extremely clear, minimal demo that illustrates the issue with as little code/markup possible, I don't mind leaving it here to see if anyone wants to chime in. You will exponentially increase your odds of getting an answer when you spend the time isolating things in CodePen. You spent 13 paragraphs describing the problem on StackOverflow with zero code, but I bet that if you just posted a simple CodePen along with one brief question like "click the 'switch class' button and notice the jump on these browsers ____...how can I make that smooth?", you'd get a ton more people willing to jump in and help. I know it's a pain to create minimal demos and craft succinct questions. It's really an art form that will pay huge dividends when you invest the time.
  12. Did you try this? It was my very first suggestion and from what I can tell, it fixes the issue. Just update to 3.11.4.
  13. Here's one idea: https://codepen.io/GreenSock/pen/wvxbvjg
  14. Thanks for the improved clarity on exactly what the issue is, how to reproduce, etc. 👍 I believe this boils down to several things: As I explained in a previous thread, when you associate a ScrollTrigger with a timeline (rather than a tween), it must WAIT 1 tick to do its refresh (when it calculates start/end values and applies pinSpacing, etc.) because timelines are almost always created and THEN populated and it's super common to assign the ScrollTrigger in the constructor like gsap.timeline({ scrollTrigger: {...}}). But in your scenario, you're creating the ScrollTrigger and immediately trying to set the scroll position which actually depends on a bunch of extra pinSpacing being implemented at that point which leads me to point 2: When you're trying to set the scroll position, it doesn't exist. For example, let's say you're trying to set the scroll position to 500...but the page literally has NO scrolling space whatsoever. So you can't scroll to 500 when the maximum you can scroll to at that point is 0. I think you've got logic problems in your spacing. Your code seems to be written assuming that each panel's scroll position corresponds to 100vh further down, but you're setting up your ScrollTrigger with a trigger of "container" and you don't set an end value at all, thus it defaults to "bottom top". Since the container is 100vh itself, that means the ENTIRE ScrollTrigger (across ALL panels) will only last 100vh. You're also doing a findCurrentSlide() inside an onToggle() but when you resize that may not be entirely accurate based on the new measurements. For example, if you scroll all the way down, progress is 1 on the timeline but if you resize that scroll position may actually correspond to a progress of 0.998745, thus currentLabel() will be one less. You might want to just get the closest label instead. In my fork I've included a function for that. It's not a bug in ScrollTrigger.scroll() - you could manually do it with window.scroll() and you'd see the same result. it's just logic and timing stuff. And for point #1, you can force a .refresh() call on your individual ScrollTrigger immediately after creating it so you don't have to wait 1 tick (since you know you're done populating it at that point). https://codepen.io/GreenSock/pen/JjBqjEe?editors=0010 Does that clear things up?
  15. Maybe this: https://caniuse.com/?search=displacementmap Just be careful - I think SVG filters can be pretty expensive performance-wise (unrelated to GSAP). If I were in your shoes, I'd run some tests and I'd definitely compare it to doing the same thing in Pixi.js. Good luck!
  16. I'm still not sure what you expect, but here's a quick fork with a guess: https://codepen.io/GreenSock/pen/jOpRYGX I had to adjust the start/end for the very first one and the very last one so that the first one starts later than normal to correspond to the 0 position, and the last one ends early so that when the scrolling stops, it's complete.
  17. Ah, it looks like you weren't doing proper cleanup, so you were creating conflicting/competing tweens. I'm not sure what you were trying to do with the ScrollTrigger stuff there, but it's not doing anything because you didn't import or register ScrollTrigger. Here's a simplified version: https://stackblitz.com/edit/gsap-react-basic-f48716-qu9ztt?file=src%2FApp.js I'd strongly recommend reading this article: gsap.context() is your new best friend in React. It makes cleanup super easy, plus selector scoping is very convenient. I hope that helps.
  18. Hi @Habibur Rahman. Thanks for being a Club GreenSock member! 💚 It's super difficult to troubleshoot a live site. There are just way too many factors and it's not possible to tweak and see how things are affected. Is there any way you could provide a minimal demo, like a CodePen or Stackblitz? That's significantly improve your chances of getting a good answer here. Please don't put your whole project there - just a few colored <div> elements that illustrate the problem with as little code as possible. One thing I'd try first is updating your GSAP version. It looks like you're using 3.11.2 but you should definitely update to 3.11.4. There were a few bugs that were fixed. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt. Once we see a minimal demo (like in CodePen or Stackblitz), I'm pretty confident we'll be able to offer some solid advice.
  19. Are you trying to calculate the transforms necessary to make that element full screen? If so: https://greensock.com/docs/v3/Plugins/Flip/static.fit() But if your goal is to have it animate there, you might want to look at a completely different technique known as "FLIP" because it can be SUPER powerful and way easier, plus more responsive. https://greensock.com/docs/v3/Plugins/Flip For example, you could just capture the state (at the small size), then apply CSS that'd make that element full-screen (maybe even position: fixed) and then let Flip plugin do the animation between those states. If you've never heard of this technique, I'd highly recommend at least reading up on it or watching the video. Once you grasp it, you'll see how incredibly powerful it can be in certain situations. Good luck!
  20. Can you be VERY specific about what exactly you expect? It's working precisely as it should according to your code, so I'm not sure what you want to be different. The last part doesn't show the animation because you've got the "start" set to "top top", meaning when that last section's top hits the top of the viewport, that's when it would begin the scrubbing animation...but it's impossible to scroll PAST where the top of the last section hits the top of the viewport, so you'll never see that animation scrub. This is all just logic stuff in how you're setting it up. I'm just not sure what you want, so I'm having a hard time advising you.
  21. It looks like you're getting bitten by the React 18 double-invoke of useEffect()/useLayoutEffect(), and since you're not doing proper cleanup, you're creating duplicate/competing ScrollTriggers/animations. All you need to do is return a cleanup function that calls mm.revert(). https://codesandbox.io/s/inspiring-mcclintock-z6m9io?file=/src/App.jsx I was a bit confused about why you're using a matchMedia("(min-width: 1px)") - wouldn't that ALWAYS be true? I mean it's fine if you want to do that...it just seemed a little odd to me. If you don't use matchMedia(), you could use gsap.context() (which is what gsap.matchMedia() uses under the hood) - it's your new best friend in React. I'd highly recommend reading this article: Does that help?
  22. If you need help, please provide a minimal demo (like a CodePen) and clarify what isn't working the way you'd expect. A screen grab doesn't really help
  23. Absolutely. https://greensock.com/docs/v3/GSAP/UtilityMethods/toArray() Glad it helped. Enjoy!
  24. I noticed a few things: You used the same selector for "footPrint" and footPrintTwo" (".box"). I assume you meant to use ".box2" for footPrintTwo? You have a typo: start: 'botttom bottom' You're creating a whole timeline for each and then adding only one tween which is totally fine but you could simplify it to using just the tween (and no timeline). autoAlpha: true is not a valid value. I assume you meant autoAlpha: 0. Are you trying to pin each section while those animations occur? If so, here's a demo that I think simplifies things quite a bit and [maybe?] delivers what you were looking for: https://codepen.io/GreenSock/pen/mdjgMxp Does that help?
  25. It's actually SUPER helpful to have them embedded. I'm not aware of a way to prevent that, sorry.