Jump to content

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

GreenSock last won the day on January 26

GreenSock had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


GreenSock last won the day on January 26

GreenSock had the most liked content!

Community Reputation

12,429 Superhero

About GreenSock

  • Rank

Contact Methods

Profile Information

  • Gender
  • Location
    Chicago Area
  • Interests
    Volleyball, Basketball, Christian Apologetics, Motorcycling

Recent Profile Visitors

56,790 profile views
  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