Jump to content

GreenSock last won the day on September 22

GreenSock had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. An animation's progress can never be less than 0. It should always be between 0 and 1. What do you mean "in a full circle"? It look like it only goes horizontally. Do you mean all the way in one direction so you get to the loop spot? It sounds like you're running into logic issues related to infinite loops. For example, if a value goes from 0 -> 100 and you try to go forward from 80 to 20, that would mean it goes from 80 -> 100 and then instantly has to jump to 0 and proceed to 20. Likewise, if you want it to go in the opposite direction and you start at 20, it must go down to 0 and then jump up to 100 and go backwards to 80. That's essentially what the helper function does internally to do its infinite looping. If you're trying to replicate that on your own outside that function, you'll need to follow that concept, like mapping the direction of the values and then creating 2 sequenced tweens accordingly. It's beyond the scope of help we can provide in these free forums which are focused on GSAP-specific questions (like about the API) rather than logic and custom consulting services, but we do offer paid consulting if you'd like to contact us about that. Or you can post in the "Jobs & Freelance" forum. Good luck!
  2. This is definitely an edge case, but you could probably wire up a ScrollTrigger.scrollerProxy() to handle this, like: ScrollTrigger.scrollerProxy(innerDoc.scrollingElement, { scrollTop(value) { if (arguments.length) { innerDoc.scrollingElement.scrollTop = value; // setter } return innerDoc.scrollingElement.scrollTop; // getter }, getBoundingClientRect() { return iframe.getBoundingClientRect(); } }); innerDoc.addEventListener("scroll", ScrollTrigger.update); And then make sure you set scroller: innerDoc.scrollingElement on your ScrollTriggers. The main problem is that inside iframes, the scrollingElement doesn't fire "scroll" events (even though that's the element that's scrolling!) but the root document does. Does that help?
  3. Here's a relatively advanced solution from a past thread that might help: https://codepen.io/GreenSock/pen/JjZdPWj I hope it'll help get you going in the right direction. Good luck!
  4. Yep, and just to show you where the anchor points were, here's a fork that makes the path editable: https://codepen.io/GreenSock/pen/BavBjNK?editors=0010
  5. Yeah, it's just using the bounding box for your SVG shape. It can't know that you want to contort it into a different angle like that, since the native shape itself is more like a diamond shape. @Rodrigo's solution is a good one. 👍
  6. Sorry, I don't see the problem. If you need help, please be VERY specific about exactly how to reproduce the problem and make sure the demo is as isolated as possible.
  7. I don't have much time right now, but from a quick glance it looks to me like it's mostly about the images loading. When you check the measurement, it's BEFORE those loaded and you didn't set any width/height on them in the markup/CSS, so the browser has to wait until they load to re-layout the page and accurately report things. So you should wait until those finish loading before you do your measurements and set up the animation/ScrollTrigger. Right?
  8. I don't have much time at the moment, but from a cursory glance the issue is that you set the scroller incorrectly. You're setting "scroller" to be the ".interface-interface-skeleton__content" <div> which means the ScrollTrigger will watch THAT element for scroll events. In other words, the scrollbar that's moving would have to be the ".interface-interface-skeleton__content" element's. But in your demo, that's not correct - the scrollbar is on the nested <iframe>'s <body>. See what I mean? So you're telling ScrollTrigger to watch one scrollbar, but using an entirely different one to actually scroll things.
  9. I'm a bit confused by that - all the helper function needs to concern itself with is the overall bounds of the entire chunk containing all the boxes - it lets you position things however you want with CSS which is the thing that should control formatting/spacing anyway. Why do you think it belongs in the helper function? What if there's non-uniform spacing? The helper function shouldn't have anything to do with layout; it's purely about movement. Maybe I'm missing something?
  10. Yes, that's because you're trying to use a native scrollIntoView() method that isn't SmoothScroller-aware. Just use the appropriate ScrollSmoother method: // OLD this.wrapperEl.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', }); // NEW this.smoother.scrollTo(this.wrapperEl.nativeElement, true); https://stackblitz.com/edit/stackblitz-starters-unyihj?file=src%2Fapp%2Fapp.component.ts
  11. Here's a version that has 4px between the boxes: https://codepen.io/GreenSock/pen/jOQgNag?editors=1010 Just make sure you add the paddingRight to the hozirontalLoop() config. Does that help?
  12. Ah, that's a bit of a tricky logic thing actually. Let me explain... When you set a speed, it alters the height of the body accordingly, so if speed is 0.5 it would stretch the height to be 2x what it normally would be (hence you must scroll twice as much...half speed). So let's say the target is 500px from the top...normally the offset would be 500px of course but if the speed is 0.5, that means the offset would be 1000px for the actual window (native scrolling) but the scrollTop of the ScrollSmoother would still be 500px. So it's native scroll vs. ScrollSmoother's scrollTop offset. See what I mean? Both are technically accurate in different ways/contexts. So if someone wants to find the offset relative to the native body scroll, it's returning the correct value currently. But when you plug that into the ScrollSmoother's scrollTop(), that's double due to the speed compensation (assuming speed is 0.5). What I think the best solution here is to add a boolean [3rd] parameter to the offset() method that allows you to specify which one you want - speed-compensated or native scroll position. And by default, we'll make it speed-compensated which would give you the behavior you're asking for here. I just updated the beta file (you may need to clear your cache): https://assets.codepen.io/16327/ScrollSmoother.min.js Better?
  13. Sorry, I don't really know what you mean - are you saying that you want to create a ScrollTrigger instance...and then LATER change the "scroller" config property to something else entirely on that same instance? You'll definitely have a much, much better chance of getting a solid answer here if you provide the most simple minimal demo possible that clearly illustrates the problem. It doesn't need to be CodePen. Stackblitz is good too. Or whatever.
  14. I'm not at all familiar with Angular, but it looks to me like a CSS issue on your end where you set the height of the content to be 100%, thus there's no scrolling possible: https://stackblitz.com/edit/stackblitz-starters-ck4w7t?file=src%2Fapp%2Fapp.component.ts,src%2Fglobal_styles.css Does that help?
  15. Also, I noticed you're using React but you're not doing proper cleanup. I'd strongly recommend you read this: gsap.context() is your new best friend in React because it makes cleanup so easy.
  16. @wpsoul we're not aware of any issues with ScrollTrigger having wrong positions in an iframe; please provide a minimal demo that clearly shows the issue (like a CodePen or Stackblitz) and we'd be happy to take a look. Keep in mind that iframes are treated by the browser as entirely different scrolling/window elements. So if you're expecting things inside the iframe to be able to detect positions OUTSIDE the iframe in relation to the (outer) viewport, that's simply impossible (as far as I know). Browsers don't allow that for security reasons.
  17. Did you try adding it to various elements including the parent? I've recently seen some very odd Chrome-specific rendering issues (totally unrelated to GSAP), particularly with large elements. It's like Chrome has some limit to the dimensions that it buffers or renders in certain scenarios (maybe an optimization they're trying to apply...but it breaks large things). I know that in one of those scenarios in the past, adding will-change to the element and/or its ancestor(s) seemed to resolve it. 🤷‍♂️
  18. GreenSock


    Hi @AllenIVe. I'm not very familiar with LocomotiveScroll - are you just asking how to pin something? Maybe it'd help if you tried with ScrollTrigger/Smoother and post a minimal demo (a CodePen or Stackblitz) and explain what isn't working the way you'd expect. It should be pretty simple to pin an element with ScrollTrigger (see the docs and search for "pin").
  19. @OEO could you please provide a minimal demo that clearly shows that behavior? I just tested it in the demo above and it worked as expected. I must be missing something. 🤷‍♂️
  20. Yep, that's exactly right. And it'll also allow any IP address. 👍
  21. Is there a reason you're not just using text-align: right? Why are you doing direction: rtl? direction: rtl makes some fundamental changes in the way things flow which interferes with SplitText. Are you just trying to get things to align right?
  22. Yeah, the problem is that you're animating the trigger element itself, so that will throw off the calculations. You should almost never animate the trigger element itself. With enough custom logic, you could accomplish it, though. It's beyond the scope of help we can provide for free in these forums, but it basically boils down to setting the start/end values such that they factor in the linear movement you're doing to the trigger itself. We do offer paid consulting services, so feel free to reach out to us if you'd like to explore that. Anyone else is welcome to chime in with suggestions here, of course. Good luck with the project.
  23. You want them to animate to random positions and also make sure none of them overlap (so they're not actually random in that case)? If so, you'd need to work out that custom logic yourself, probably by checking bounding boxes, etc. It's not as if GSAP has a built-in tool do do that custom logic for you, sorry. That's not exactly a simplistic thing. Good luck with the project!