Jump to content

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

GreenSock last won the day on January 25

GreenSock had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. Can you please be more specific? Where was the confirmed bug?
  2. @Lichay you have been asked many, many, many times to provide a minimal demo that clearly shows the issue in context. You did that in your original post (thank you!), but then Zach provided you a list of problems that he noticed in your code. If you want help, you must provide an updated demo (maybe fork the old one) and clearly explain what isn't working the way you'd expect. When you keep coming back with a simple "I tried everything...it doesn't work" that doesn't allow us to see where you mis-applied the fixes or what other issues exist in your code. We have burned quite a few
  3. I figured it might be useful to see it converted to ScrollTrigger so that you could study it. Look how much simpler the code is: https://codepen.io/GreenSock/pen/ccb4c35c8a930f827383f09e15f3b052?editors=0010
  4. Is there some reason you think that decimal values are less performant? Technically if you add a rounding step in there, that's another calculation so it'd perform very slightly worse unless the rounded values somehow help another aspect of your project like if rendering on whole pixels is easier on the CPU. Either way, the performance difference between rounding or not rounding will almost surely imperceptible in any real-world way unless maybe you've got thousands of simultaneous tweens running (even then it's somewhat doubtful). Keep in mind that calculating the interpolated va
  5. Ah, it looks like this is just a logic issue in your code and the way React works - you're attempting to animate that box element before it even exists! Notice that you return (<> ...) the element declarations AFTER you create the GSAP.from() animation. So box.current is undefined at that point. See for yourself with a console.log(box.current) right above the GSAP.from(...). Like I said, I'm not a React guy at all, so I'm sure someone else could advise you better about how you should be structuring your code there, but if you just tuck the GSAP call into a delayedCall() so
  6. Hm, it looks like you're loading a BUNCH of redundant stuff in various ways: The GSAP core via a <script> tag The GSAP core via a require() call Just TweenLite piece of the GSAP core via a normal ES Module import statement CSSPlugin which is already in the core (so this is totally unnecessary) And then you're registering TweenLite as a plugin (it's not a plugin). You need to decide how you want to work with GSAP - as a regular ES5 file loaded via <script> OR as a UMD file loaded via a require() call OR an ES Module that's imported. Just c
  7. Once you provide a minimal demo, I'm sure we could offer more help. At this point, I'm just taking shots in the dark. I know you think you're passing in a <div> reference, but I'm pretty sure that's not actually what's happening. I'm not a React guy, but maybe the problem is that you're passing in the ref instead of the actual element, so try this: gsap.from(box.current, { x: "-100px", duration: 1 }); (notice the ".current")
  8. Cool - just making sure you're all set here, @mindthegap. I saw your edit and it sounds like you solved things already. 👍
  9. Correction: apparently there's an issue preventing my updates to the docs from getting saved right now, so you probably won't see the update I made yet. We're working on that.
  10. Sorry about the confusion there - I have updated the docs accordingly. Although technically it records opacity by default (in order to accommodate the "fade" feature), it doesn't animate that value unless you specify it in the list of props (or of course if you're swapping elements and set fade: true).
  11. It isn't staying there for 1-2 seconds in your demo - it's an illusion caused by the fact that you're using a "power4.out" ease which makes it slow WAY down at the end. If you change that ease to "none", for example, you'll see the change in direction is immediate. To make it jump back to the very start of the animation once it completes, you can use an onComplete to basically "rewind" it like this: https://codepen.io/GreenSock/pen/43a85e285303a5e8f47ae9b9090f7ca2?editors=0010 There are actually a bunch of ways you could do it, but I don't want to overcomplicate
  12. Several problems: Your jQuery object is totally empty - you can see that with console.log(input[0]), for example. So it's not selecting what you think it's selecting. JavaScript doesn't have any access to pseudo elements. That has nothing to do with GSAP. You can, however, use JavaScript to animate the actual CSS rule itself. Here's a fork that shows how to use CSSRulePlugin for that: https://codepen.io/GreenSock/pen/7e04b6f35e1944046c17dc803151e46a?editors=0010 Does that clear things up?
  13. It's difficult to troubleshoot by just looking at a few screenshots, but the errors make it sound like you wrote your ScrollTrigger stuff incorrectly. For example, you'd get those errors if you did this: // BAD gsap.to(".whatever", { scrollTrigger: ".whatever", pin: true, end: "x=500", scrub: 1 }); Instead of this: // GOOD gsap.to(".whatever", { scrollTrigger: { trigger: ".whatever", pin: true, end: "x=500", scrub: 1 } }); Notice the ScrollTrigger-related values are nested in a "scrollTrigger" object. In the first example, you're literally telling GSA
  14. It looks like the browser won't allow you to go quite to the maximum scroll value which is calculated like document.documentElement.scrollWidth - window.innerWidth. If you literally try setting window.pageXOffset to that, the browser is like "ummm...nope. I won't move at all. Completely ignoring you." An easy solution is to subtract a tiny portion from the end value, like: // BEFORE (bad) SCROLLER.scroll((INDEX + 1) * (SCROLLER.end / (CARDS.length - 1))); // AFTER (good) SCROLLER.scroll((INDEX + 1) * ((SCROLLER.end - 0.1) / (CARDS.length - 1))) Also, one minor tip - you could simplify
  15. I'm not seeing any GSAP-related errors there, are you? It looks like you're trying to use ScrollMagic which is not a GreenSock product and I'd STRONGLY recommend using ScrollTrigger instead because it's integrated with GSAP, it's well-supported, and it does everything ScrollMagic can do plus a whole lot more. You're also loading 3 different GSAP files which is a huge waste and potential source of problems (because one is a very old version with a different API). Now that I see that, my guess is that was the root of the problem - you were probably using a super old vers
  16. Is it working better now (after clearing your cache)? There was a very particular edge case that I needed to work around in DrawSVGPlugin, requiring one line of conditional logic that I put into the next release, and you can preview it now on CodePen with the usual URL: https://assets.codepen.io/16327/DrawSVGPlugin3.min.js
  17. That sounds like you're trying to tween something that won't allow any dynamic properties to be added to it (extremely unusual in the world of JavaScript). Again, it's soooo hard for us to troubleshoot blind like this. What exactly are you trying to tween? My guess is that it's not what you think it is but I'm taking shots in the dark here.
  18. Yes, but try to console.log(this) in there. What does it say? My guess is that it's not a Tween instance which means there's something else going on in your project. I wonder if you added that onUpdate to a timeline instead of a tween or something. Again, it's very difficult for us to troubleshoot blind, so please provide at least a semi-working CodePen
  19. We'd love to help, but reading through 500+ lines of copy/pasted code that's not even in context is beyond the scope of the help we provide in the free forums, especially since it sounds like this isn't directly related to GSAP (you mentioned it only happened after you started using Webpack). I can assure you GSAP works great with Webpack, so it's not like anything is incompatible. If you still need help, here are some options: Try to recreate the problem in a MINIMAL demo (not your real project - just try getting one <div> to move or something). Often when you strip
  20. Sorry, but it's almost impossible for us to troubleshoot without seeing the error in context. I appreciate the CodePen, but obviously it's totally non-functional because it doesn't include any of your markup, the libraries you're using, or anything besides a copy/paste of JS code. I need to see the error itself in context - can you please fix your CodePen? We'd love to help. It sure sounds to me like "this" doesn't refer to what you think it does in that context. You're not using an arrow function for your onUpdate, are you?
  21. It's pretty tough to diagnose by just looking at a screenshot. It sounds like there's something funky going on in your setup or build process or something. Did you try to console.log(GSAP) and see what it is? It doesn't sound like you're getting the actual gsap object.
  22. Zach's ideas are all valid, and here's another option that uses a little helper function that lets you set a rotation origin via global coordinates, and it'll MOVE the element around that point (it doesn't set its rotation at all - it just moves it via x/y) and each time you alter its originX or originY, it'll reset the rotational value: https://codepen.io/GreenSock/pen/10dbc8e963195e2420300eba597212fb?editors=0010 So you just create a Rotator instance for each element you want to move like that, and then tween its "rotation" value. Just another option for you. I
  23. Like Zach, I'm a bit confused by your question. Are you saying that you want to CALL a specific function whenever you enter a section on scroll? Functions aren't "on" or "off" - they're just objects that can be invoked. If you want to call a specific function like that, sure, just use the onEnter and onEnterBack callbacks in a ScrollTrigger. It's all in the docs.
  24. I read your post a few times and I don't really understand what you're asking. I mean...if you tween to {x: 10}, for example, your element would indeed stay there. Are you saying that your element jumps back to the previous position or something? A minimal CodePen demo would be SUPER helpful, and maybe a little more description about what you're asking/wanting. We'd love to help - I just don't quite get what you're asking.