Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

GreenSock last won the day on May 14

GreenSock had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. I'm definitely not a React guy, but it looks to me like the problem is that you're basically having React re-render the list when you sort it and that of course interrupts the dragging and you're no longer dragging the same element (since React re-rendered a new one?) This is more of a React question that a GSAP one. It seems to me like you should restructure things so that it's not re-rendering elements mid-drag. Maybe a React expert could chime in - we really specialize in GSAP questions in these forums, not React ones.
  2. First of all, welcome to Club GreenSock! That error sounds quite strange actually. It's difficult to troubleshoot without a minimal demo. Could you provide one please so that we can reproduce the error on our end? It almost sounds like somewhere in your code you've got ScrollSmoother() called (as a function). I'm also curious if you tried loading and registering ScrollTrigger because that's a dependency of ScrollSmoother. In other words, you should gsap.registerPlugin(ScrollTrigger, ScrollSmoother). If that doesn't help, definitely post a minimal demo and we'll take a peek. You're welcome to use CodeSandbox for the minimal demo. Here's a starter with Svelte: https://codesandbox.io/s/gsap-svelte-starter-cbvtv The simpler the better - please do NOT post your whole project. A few colored <div> elements with the necessary ScrollSmoother code is perfect.
  3. It looks like you're making one of the common mistakes - you're NESTING a ScrollTrigger inside tween that's inside a timeline. You can't have the ScrollTrigger and the timeline both fighting for control of the tweens playhead. See The solution: either put the ScrollTrigger on the timeline or don't even use a timeline at all and just use a standard tween: // BAD scTl.current.to(el("#building"), {... // GOOD gsap.to(el("#building"), {... Happy tweening!
  4. Welcome (officially) to the forums, @Nye. And thanks for being a Club GreenSock member! This is an engineering issue in the way you've got things structured - it makes it pretty difficult to do what you're asking. Ultimately, I'd think it's best for you to expose some kind of getter/setter for the amplitude so that you can easily tween it. Right now, though, it's a bunch of separate classes that have disparate parts of the data and then you've also got various functionality all merged into a single function like the Wave.draw() method not only does the drawing but it ALSO calls update() on the points which actually MOVES them. That gets very messy when you want to isolate functionality, like maybe you only want to draw() the current state rather than ALSO moving things. I'd recommend restructuring things to isolate the functionality you need properly. And then maybe you'd have a new amplitude() getter/setter that you can tween. I hope that helps get you moving in a positive direction.
  5. Hi @navelascoa. Welcome to the forums. I don't understand what you're asking. I removed all the animations and resized the browser to see if you had responsive artwork and it doesn't look like you do. What exactly do you want to recalculate? Can you strip things down to something even simpler, like a couple of colored <div> elements only? I'm sure there's a way to accomplish what you want, but I'm just not understanding your goal.
  6. That video looks like it's simply a 24-bit .png with transparency (white clouds varying in opacity) that gets animated right-to-left. If you want it to seamlessly repeat, you'd need to create a pattern where the image's left side matches up with its right side (seamless) and then just butt them up next to each other and as soon as the left one is off-screen to the left, make it jump over to the far right side and do the same thing with the duplicate. Don't forget to set the ease to "none" if you want it to travel at a constant speed. Good luck!
  7. We're still working on several enhancements, so I cannot give you a specific date, sorry. However, I'd be happy to send you the unprotected beta file if you need that for your project - just Direct Message me.
  8. It looks like you didn't provide a minimal demo so it's tough to diagnose but I assume you just need to call ScrollTrigger.refresh() after your reroute is finished loading everything. That tells ScrollTrigger (and ScrollSmoother) to recalculate the start/end positions. Also, if you're rerouting and there's new content, you should make sure you kill() any of the ScrollTriggers on the OLD page. You can kill them all with ScrollTrigger.getAll().forEach(t => t.kill()); If you're still having trouble, please provide a minimal demo so we can see the issue in context. DO NOT include your whole project - just the simplest possible reproduction of the issue with a few colored <div> elements, for example.
  9. @animationmagic it's tough to troubleshoot blind but that error message sounds like your path is wrong and/or you're trying to use the regular ES5 minified file instead of the module. // BAD import ScrollTrigger from "gsap/ScrollTrigger.min.js"; // GOOD import ScrollTrigger from "gsap/ScrollTrigger"; // or if you need the non-ES6 file, use the /dist/ folder: import ScrollTrigger from "gsap/dist/ScrollTrigger";
  10. I glanced at that, yes, but there's a lot of code in there plus it uses Vue and it's not directly a GSAP question - it's more of a logic thing that'd involve digging deeply into the logic flow of that demo and trying to troubleshoot it for you which is beyond the scope of help we can provide for free in these forums. Sure, here's a very simple demo: https://codepen.io/GreenSock/pen/bGLgjNO/58d28984ce06a0dd93160a1c01a09b5a?editors=0010 Does that help?
  11. I'm not sure I understand your goal correctly, but I could imagine multiple ways of doing this: Put all the text blurbs stacked inside that red sticky bar (so only one shows at a time) and then fire off an animation of the "y" property of the container to "scroll" them. Only have two elements, one that's entering and one that's exiting. Dynamically populate them and animate them as you need (again, the "y" or "yPercent" property) Good luck!
  12. Hi @KinnuSingh. Looks like a fun project. You've definitely crossed way over into the "custom consulting" zone here We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. All of what you're asking about seems very doable to me, but it's time consuming and you may have some logic issues on your had because you have equally-spaced sections but you seem to be saying that you want them to go at different speeds, have varying amounts of animation crammed in, etc. but in terms of scroll distance they're all the same so that's a logical impossibility (unless I misunderstood). You can pin things, of course. Definitely not a simple "add this one parameter and it magically accomplishes all of your to-do list". I'd suggest only focusing on getting the animation just right WITHOUT connecting it to scroll at all first. Imagine the user scrolling at a constant speed to view the animation. Once you can just play the animation and it looks the way you want (in one timeline most likely), THEN hook it up to ScrollTrigger. You'll also have a better chance of getting answers here if you just focus in on ONE thing at a time. "How can I ____?" and provide a minimal demo. It quickly gets overwhelming to read laundry lists of requirements, "I want it to this ____ and this___ and then this____ and also remember that it should ____." That's fine for a paid consulting project, but if you want help in these free forums it's definitely best to keep things very focused on one question/challenge at a time (one thread per challenge). Good luck!
  13. I'm definitely not a React guy, but I think the problem may be that you're trying to reference ".App" before it even exists. You could use the ref instead because GSAP's selector is smart enough to check for .current on the object you pass in: // BAD const appRef = useRef(null); const el = gsap.utils.selector(".App"); // GOOD const appRef = useRef(null); const el = gsap.utils.selector(appRef); Does that help?
  14. Yep, the browser can't know how big the image is that you're loading until it's loaded Glad you figured it out.
  15. I'm not seeing any issues. Looks the same in all browsers for me. I wonder if you recently installed a browser extension or something that might be causing problems for you just on your system? Have you verified that nobody with Edge can view the page?
  16. Yeah, it's pretty tough to troubleshoot blind but I'm surprised you're getting the same error if you corrected TweenLite.ticker to be gsap.ticker. Are you loading a recent version of GSAP? If you still need help, please post a minimal demo that clearly shows the error and we'll take a peek.
  17. Hi @Brandon Marsh. Welcome. Yeah, we definitely can't support AdHelper or troubleshoot code in another library that GreenSock didn't create. It looks like you're using TweenLite which is a relic from the very old GSAP - there's a much more modern syntax that does away with TweenLite/TweenMax/TimelineLite/TimelineMax. See I suspect that maybe the problem is that the code is referencing TweenLite.ticker which should be gsap.ticker. Good luck!
  18. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. Like I said, you can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly.
  19. LocomotiveScroll isn't a GreenSock product, so we can't really support it here - is there a reason you're not just using ScrollSmoother instead?: https://codepen.io/GreenSock/pen/OJQbEQE?editors=0010
  20. Glad you figured it out! No need to feel stupid - we've all done stuff like that before. It's the nature of development sometimes. Happy tweening!
  21. I'm not sure I'm visualizing it the way you intended, but that would likely require pinning each element for only the distance to have the lower tab animate to the bottom of the viewport, then unpin it and allow normal scrolling while also animating the lower tab(s) down at the same speed, and so on. It doesn't seem like a trivial thing to me. Doable? Very likely. Simple? Nope. Feel free to post in the "Jobs & Freelance" forum if you'd like to hire someone to help, or contact us directly if you need paid assistance from us. Good luck!
  22. I'm still not sure because your demo has multiple scrollbars. It sounds like maybe you want to do "pinning"? That doesn't actually stop the scrollbar from moving - it simply pins the element for a certain scroll distance. You can read in the docs about the "pin" property of ScrollTrigger. For the record, as a user I would HATE it if a site literally prevented me from moving the scrollbar or it stopped responding to my mouse wheel. But maybe I'm weird.
  23. You had the "duration" tucked inside the scrambleText: {...} object, so it defaulted to using a duration of 0.5 yet you also had the revealDelay set to 0.5 (the same), thus by the time it started the reveal, the tween was over. I assume you wanted it to be more like this?: https://codepen.io/GreenSock/pen/zYRozmR?editors=0010
  24. I read your question a few times but I'm still very confused about what you're asking. You want to pause the animation (but allow scrolling)? Or you want to pause scrolling so that even if the user is trying to drag the scrollbar (or spin their mouse wheel), it won't budge?
  25. You said you were attaching a minimal demo. Did I miss it? I see a CodePen (which you said works fine)...and a link to a live site...where's the minimal demo that allows us to see the issue in context? It's virtually impossible to troubleshoot blind. Is there some way you can create a separate minimal demo with just some colored <div> elements that reliably reproduces the issue and send that to us?