Leaderboard

Hi, Horizontal pinning is not supported since you're already pinning vertically, what you can do is create a timeline that has the ScrollTrigger configuration and add that particular animation at the end of it, since is the last horizontal section just combine the two demos you already have in place. Something like this: https://codepen.io/GreenSock/pen/JjqqOdL Hopefully this helps. Happy Tweening!

Hi, I'm not 100% sure that this can be achieved. I can assure you that the Inertia Plugin works with the Draggable part of the Horizontal Loop helper function, not the Observer part of the codepen Cassie created. For that you'll have to track the delta and velocity values the Observer Plugin reports, get the current index and use the toIndex() method provided by the helper function in order to move to a different index rather than the next one. You'll need to fiddle a bit with the math of this in order to get the next index value correctly, for that I'd recommend using the snap and wrap utility methods as well: https://gsap.com/docs/v3/GSAP/UtilityMethods/snap() https://gsap.com/docs/v3/GSAP/UtilityMethods/wrap() Hopefully this helps. Happy Tweening!

Hiya! So honestly question 1 & 2 soundslike a bit of a cross device/input accessibility nightmare. I would personally just disable the custom cursor in text fields and allow the users operating system to handle it. Maybe someone else will jump in and help, but these questions are definitely more on the logic side of things and less of a GSAP related question, so it's a little out of scope of these forums. I will happily jump in and help with #3 though as it's more animation related! This is to do with the initial cursor position that you have set here - let position = { x: window.innerWidth / 2, y: window.innerHeight / 2 }; I could jump in and edit your code, but honestly we can simplify this A TON by just using quickTo instead of quickSetter. QuickTo animates to a position, quickSetter doesn't, so allll of the code in your demo that's tracking delta and speed and stuff can go. Here's a simple example. Try this on for size, I think it's more readable and you can probably either start here and layer in what you need or refactor your old demo a little. https://codepen.io/GreenSock/pen/LYovpmw?editors=0110

Welcome to the GreenSock forums! Glad you’re here. It’s a wonderful place to learn and get your questions answered. What topics can I post about here? We love answering questions that are directly related to GreenSock tools. API questions, bug reports, or if you’re wondering why GSAP behaves a certain way - those types of posts are welcome around here. What topics should be avoided? As much as we love solving problems, the following types of questions are beyond the scope of what we generally provide here for free: Logic issues. JavaScript and application logic, CSS setup, and generic troubleshooting that isn’t directly related to GreenSock tools. Third party tools. Frameworks (React, Angular), other JavaScript libraries (LocomotiveScroll, Barba), build tools, etc. We’re happy to help with the GSAP part of things if you strip out as much irrelevant code as possible and provide a minimal demo. “How do I do this cool effect I saw on a trendy website?” Someone here may point you in the right direction but please don't expect a full tutorial on how to create and effect you saw on a slick web site. Where else can I go for help? If your question is primarily about another tool, try looking for a forum or GitHub repository about that tool. If it’s a general programming-related question, try StackOverflow. Want feedback about your working code? We’d be glad to take a peek at GSAP-specific code but for more general topics (like performance or application logic) we’d suggest something like CodeReview. Read first Please read Getting Started with GSAP, common GSAP mistakes (maybe also common ScrollTrigger mistakes), as well as the GSAP docs before asking your question. Often you’ll get your question answered just by doing that! Make a minimal demo This helps provide context and gives us a rough idea of what you’re trying to accomplish. It's WAY better than trying to dig into a live website with lots of other things going on, or looking at a small excerpt of code without much context. Pro tip: It's often easier to create a minimal demo from scratch rather than stripping out irrelevant things from your original project. You will GREATLY increase your chances of getting a prompt answer if you create a minimal demo. After you've posted a demo to our forums, please click the "Fork" button on CodePen before making future changes so that context is not lost for future readers of the forum. Be courteous We try to treat people the way we’d want to be treated around here. Please do the same. Also keep in mind that the people answering your post are doing so for free! Most of our regular contributors gain nothing from helping you except the satisfaction of doing so. Please give them your gratitude and respect. Ask away! We’re eager to help, so make a minimal demo and ask your question! We’ll do our best to answer it promptly. Pay it forward - help someone else The best way to learn is to teach someone. You’d be surprised how much you grow when you try answering some questions here! We are so grateful for the group of volunteers dedicated to helping others in these forums. It’s quite satisfying to come alongside a fellow developer who is struggling and deliver a clever solution to their issue. Become a contributor! You do NOT need to be an expert. Anyone...and we do mean anyone...is welcome here.