Jump to content
GreenSock

GSAP Helper

Administrators
  • Posts

    0
  • Joined

  • Last visited

Everything posted by GSAP Helper

  1. Hi @Chris. If you'd like some help, please provide a very simple CodePen or CodeSandbox that clearly demonstrates the issue. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.
  2. If you'd like some help, please provide a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. By the way, are you saying that onStop() fires on every single movement of your finger while touch-scrolling on a mobile device? (many times per drag?)
  3. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting 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. Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.
  4. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free "how do I recreate the cool effect I saw in this video?" 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. Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.
  5. It's pretty tough to troubleshoot without a minimal demo. I read your post a few times and I'm not really sure what you mean. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.
  6. It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.
  7. By the way, if you just want to make a fixed-position element's child draggable, it'd be as simple as: https://codepen.io/GreenSock/pen/jOzXwRd?editors=0010 Or was there some reason you're trying to use ScrollTrigger (even with no scroll)?
  8. We love helping with GSAP-specific questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I make this demo work according to my list of requirements?" 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. Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.
  9. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide tutorials or help people build out their portfolios. 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. Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.
  10. Hm, I'm struggling to follow this without a minimal demo. Are you saying that you think the .offset() method is returning an incorrect value? Also, is there a reason you're not using the .scrollTo() method (which I think you said was working fine)? Is your goal to customize the duration and ease? Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN Once we see an isolated demo, we'll do our best to jump in and help.
  11. It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? By the way, TweenMax.min.js is VERY old. Is there are particular reason you aren't using a more modern version of the library? There have been tons of improvements and there's no need for TweenMax anymore - it was combined with TweenLite, TimelineLite, and TimelineMax into a single, simplified "gsap" object. See Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.
  12. I think it might really help if you tried to isolate the problem much more, maybe with just some colored <div> elements and the GSAP code (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. This greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN That's super kind of you! We sure appreciate that, but please don't feel any obligation to donate. Pretty much all of our support comes from Club GreenSock memberships which get you some handy members-only plugins. No pressure - join whenever you see the value of doing so. In the meantime, enjoy the tools!
  13. Hi there! Unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or tutorials. We just want to manage expectations here. We're more than happy to help with GSAP-specific questions here, but If you need more 'step by step' guidance we suggest popping over to the "Jobs & Freelance" forum for paid consulting. We really recommend this video too Introducing ScrollTrigger for GSAP from GreenSock on Vimeo.
  14. It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.
  15. It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). If you can't recreate the issue on CodePen or CodeSandbox, that means there's probably some other issue unrelated to GSAP on your site. I'd recommend starting as bare-bones as you can and then just build it up to get closer and closer to your "real" site until it breaks and then you'll know the issue. It kinda looks like you either have a scrollTo tween somewhere that's getting fired or you've got a ScrollTrigger with a snap value that's applying the snap. I'm completely guessing. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.
  16. Of course anyone is welcome to answer, but I just wanted to point out that we really try to keep these forums focused on GSAP-specific questions (see the forum guidelines). That sounds like a sveltekit question for sure. I have zero experience with sveltekit. Have you tried asking that community?
  17. 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. Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.
  18. It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.
  19. No problem. Been there, done that. When you're working crazy hours on a project, feeling behind, stuff isn't working and you reach out for help in a last-ditch effort, it's easy to read unhelpful responses through a dark lens. No worries, really. Glad to hear you found a good solution. What did you mean by "...better understand the array structure...build something using arrays..."? Are you talking about the boxes.forEach(...) and scale.forEach(...) stuff? In case I wasn't clear, all that was fine - the problem was that you were animating the vertical position of the container element which throws off the start/end calculations for the child ScrollTriggers.
  20. Gosh, I'm very sorry if that came off as rude. Totally didn't mean it that way. I'm kinda baffled, honestly. I was just trying to politely express what's generally in scope and out of scope (we get a TON of out-of-scope questions here and spend many hours every day trying to help people even when it's borderline out-of-scope), and then offer a tip for how we could work together to get you a solid answer. Again, no disrespect or dismissiveness intended. I think I've read your post at least 5 times now and I'm having a very difficult time understanding exactly what GSAP-specific question you're asking. I very well may just be suffering from foggy-brain syndrome from lack of sleep. It's very common for people to come here and type out a description that makes total sense in their mind because they have a perfect understanding of it, but for the rest of us who don't have that knowledge, it can seem as clear as mud. Try poking around the forums and find another thread where someone describes the effect they want, like "I want to scroll down and have the section move horizontally but then the 3rd section have the 2nd paragraph slide up but stick to the left edge of the screen for 100px or until the red box is dragged to the threshold where it touches the text which by the way is breaking oddly on Android mobile devices - can you offer advice for fixing it?" To them, it makes perfect sense and they may get offended when someone says it's not clear. I suspect the fundamental problem in your demo is that you're setting up ScrollTriggers on elements but then shifting their container on the y axis substantially which of course messes with all the calculations. Let's say the intersection point for your element and the viewport is 100px down scroll-wise (so start: 100). Great. But if you start scrolling and then a tween grabs the container and starts animating that up by 1000px, well now of course it'll take much less than 100px to intersect with that element. It would be terrible performance-wise if ScrollTrigger had to analyze every tween and try to factor them all in, including eases. Like...TERRIBLE This smells like possibly something that you could solve better by rethinking your engineering or the effect itself - is there a particular reason that you need to animate the container up by 100vh? I mean, you could do all the math to factor that movement in and offset the start/end values but it's not trivial. Are you just trying to make it look like it's scrolling twice as fast as "normal" scroll?
  21. I read your post a few times and I'm still very lost. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free "here is my list of requirements: ____ now please tell me how to build it" 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. Your minimal demo didn't seem to make the issue clear (at least to me). Maybe instead of a detailed description of everything happening in the "real" project with accompanying screenshots that all seem to have nothing to do with the demo you provided, it'd probably help a lot if you just isolate the issue in a demo and only talk about a single problem in that particular demo. For example "I am trying to make a line go through each line of text as soon as it hits the center of the screen..." (or whatever)
  22. It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.
  23. 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. Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.
  24. It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.
  25. It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.
×