Jump to content

GreenSock last won the day on October 1

GreenSock had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. There are a few problems: You are recreating everything over and over again on resize. So you'll end up with a bunch of competing infinitely-repeating animations. You should always kill() or revert() the old one (revert() is new in 3.11). You aren't accounting for the current progress. So let's say the current animation is halfway through when you resize and it creates a whole new one - since you're using regular from()/to() tweens, it uses the CURRENT value as the end/start. See the problem? Here's a fork showing a solution (assuming I understood your goal correctly): https://codepen.io/GreenSock/pen/XWqBGQG?editors=1010
  2. Thanks for the minimal demo! You've got "scrub" enabled which scrubs the playhead of the timeline based on the scrollbar position. It sounds like you want "toggleActions" instead which just fires the animation to play as soon as the trigger point is reached (no scrubbing). In that case, just loop through your elements and create an animation for each: https://codepen.io/GreenSock/pen/ExLpGPY?editors=1010 Is that more like what you were looking for?
  3. I don't have time right now to read through the entire thread, but I wanted to chime in and clarify that a motionPath doesn't constantly re-parse and re-check positioning on an SVG element or something - there's a bunch of work up front to parse the data into Bezier numbers that can be quickly interpolated. It must rip through the values and calculate intermediary data that ensures that speed is constant even though Bezier path plotting isn't naturally. It sounds like maybe you're expecting that when you start a motionPath animation, it would constantly (on every tick) re-parse all the data and check for any changes that occurred since you began the tween. That is not the case - it'd be terrible for performance. We put a big priority on performance around here So if you CHANGE your path data and you want that reflected in the animation, you could invalidate() it to force it to re-parse the data on the very next render.
  4. Well the simplest way is to just animate x to "100vw" https://codepen.io/GreenSock/pen/rNvrQxd?editors=1010 But you can also temporarily store the current progress, revert the timeline, recreate it, and restore the progress: https://codepen.io/GreenSock/pen/YzLjRqo?editors=0010 Be careful because your original demo was creating an entirely new infinitely-repeating timeline on every single "resize" event (which can happen a ton of times while the user drags/resizes) and you never killed/reverted the previous ones, so you ended up with a bunch of animations competing with each other. Definitely not great for performance. If you're doing responsive animations, you'll love the new gsap.matchMedia() method: https://greensock.com/docs/v3/GSAP/gsap.matchMedia() Have fun!
  5. We don't normally provide full custom solutions like this, but I was curious and decided it might help you and others if I showed this approach: https://codepen.io/GreenSock/pen/zYjLmjE?editors=0010 I made the following enhancements: Added motion to the cursor so that it's nicely eased into place. You can easily control how long that takes (the lag) by changing the duration in the quickTo() methods. I switched to animating transforms rather than top/left because it'll perform better. The top/left properties affect layout, so the browser has to do more work. Transforms are cheap layout-wise. Set up a loop so that it properly handles each element that has that class applied to it. Added a "scroll" event handler that adjusts the offsets in case the user scrolls while hovered over an image. Does that help?
  6. It's tough to say without a minimal demo, but my guess is that whatever items you're feeding into horizontalLoop() don't exist at that point. So you're basically asking it to create a horizontal loop on zero elements. You might want to try a console.log() right before that function call to verify that the items you think you're passing in are actually what you think they are.
  7. Right, if you're only using GSAP in a marketing web site and there is no money being charged for any part of the site whatsoever (or anything that uses GSAP), and the Unreal Engine game doesn't use GSAP at all, that'd qualify under the standard "no charge" license to use the core tools (no bonus plugins of course which are Club GreenSock members-only). More info: https://greensock.com/licensing Does that answer your question?
  8. We can't effectively troubleshoot a live site (too many factors, impossible to tweak/experiment), but I would definitely recommend fixing your setup so that you've got ALL your content in a wrapper <div> as the docs state. Right now, you've got a bunch of other stuff sitting loose in the <body> which is not good. ScrollSmoother works by having your entire page inside that content <div> that's inside a wrapper which serves as the viewport and then it translates the content <div> accordingly to make it appear to scroll. Only position: fixed elements should sit outside your wrapper because they won't take up any space/layout. Try that and then if it still isn't working, see if you can get a minimal demo that's showing a similar problem so that we can give you some help. Thanks for being a Club GreenSock member! 🥳
  9. Welcome to the forums, @TTYG. I'm not exactly sure what you're looking for (how things will move while pinned, etc.) but it all sounds very doable with ScrollTrigger. Maybe one timeline that animates the various sections and then you just hook up the ScrollTrigger to that one timeline. If you want things to move horizontally and trigger based on things coming into the viewport, check out the containerAnimation feature in the docs. Why don't you give it a shot and then if you get stuck, post a minimal demo (like a CodePen) and we can take a look? Have fun!
  10. I'm so sorry about the delayed response, @devin_v! I'm not sure how this slipped through the cracks. I assume you were talking about Safari only, right? That should be resolved in version 3.11.3 (just released). Is that better?
  11. Should be resolved in 3.11.3 (just launched) 🥳
  12. @BenjaminO I'm so sorry for the tardy response - not sure how this slipped through the cracks. Yeah, the problem is that it's a totally scroll-jacked site whereas ScrollSmoother leverages NATIVE scrolling. We really tried to avoid a fully-scroll-jacked approach because you lose some accessibility, users can't see the scrollbar to know how far they have to go, and the pacing can be very different than what they're used to on "normal" web pages. ScrollTrigger.normalizeScroll() is a big help, but unfortunately Apple has been just terrible with their browser implementation (lots of glaring bugs and inconsistencies and thus far they have been quite unresponsive to our many requests for clarity/assistance), so on phones it seems impossible to prevent the address bar from hiding while also keeping the native scroll. We'll keep looking for the best mix of native functionality with a rich feature set, accessibility, and smoothness. I really wish we had a silver bullet. If I had to explain all the work normalizeScroll has to do in order to work around Apple-specific bugs, your eyes would glaze over. Many hundreds of hours went into just that one feature and it's still not a silver bullet.
  13. @BenjaminO - GSAP 3.11.3 is officially released. The CDN is in the process of updating, but should have the files within 15-30 minutes (typically). Enjoy! 🥳
  14. @Sam Tremblay I'd strongly recommend updating to 3.11.3 (just released). It's got some improvements in there that may help in your scenario.
  15. @Lunakepio I would strongly recommend updating to 3.11.3 (just released). Does that resolve things for you?
  16. @thei - GSAP 3.11.3 is officially released. The CDN is in the process of updating, but should have the files within 15-30 minutes (typically). Enjoy! 🥳
  17. I just added a kill() function to the MotionPathHelper instance in 3.11.3. Enjoy!
  18. @joe.madden, @amit95 - GSAP 3.11.3 is officially released. The CDN is in the process of updating, but should have the files within 15-30 minutes (typically). Enjoy!
  19. Exactly right. ScrollSmoother's scrollTop() should definitely reflect the distance the page has scrolled (it'd be weird if that value didn't change at all while you scrolled and you've got an element pinned). And yes, Flip is super helpful in cases like this. 👍
  20. That's highly unusual. Maybe you've got an odd build system setup that doesn't work with the typical npm/yarn package manager, but I'm glad you got it working. 👍
  21. Yeah, that's definitely beyond the scope of what we can provide in these free forums, sorry. That helper function isn't made to accommodate messing with the widths after creation (aside from normal responsive percentages). With enough code, it's definitely possible to accommodate - just not simple. If you'd like to hire us to dig into that for you on a paid consulting basis, feel free to reach out and we can talk scope/costs. Or you can post in the "Jobs & Freelance" forum to see if someone else is willing to jump in on a paid basis. Or of course if someone has time and willingness to do it for free here, awesome. 👍
  22. Unless you're a very advanced user who doesn't need any CSS animating functionality, you should NOT be importing the "gsap-core" file from the raw src directory. That doesn't include CSSPlugin. Again, it's only intended for very advanced users who have particular needs (no use for CSS animating) - that's almost nobody. Typically you don't have to write out the whole path like that anyway - just use the default like: import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; If you really want to write out the whole path, then use the index.js file, not gsap-core.js.
  23. Sorry about that @BenjaminO. I did a bunch of work on ScrollTrigger/Smoother since I posted that and one of the improvements ended up breaking that .scrollTo() functionality, but I believe that's all patched up now. Please verify (you may need to clear your cache).