Jump to content

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

GreenSock last won the day on September 18

GreenSock had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


GreenSock last won the day on September 18

GreenSock had the most liked content!

About GreenSock

Profile Information

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

Recent Profile Visitors

63,601 profile views

GreenSock's Achievements

  1. Are you sure you called kill() on all the ScrollTriggers before you do your route change? Like ScrollTrigger.getAll().forEach(t => t.kill()) ScrollTrigger needs to record the page's scroll position when it does its refresh because it must roll back all of its changes to ensure that all the styling is back to "normal" when doing the start/end calculations. Remember, if you have any pinned elements, they typically add padding and stretch out the page. For example, your native page might be 1000px tall but if you pin an element for 5000px, now your page is 6000px tall, so if you scroll down 3000px and then refresh the browser, it has to restore that after it does all of its teardown & calculations. Otherwise, a 1000px page can't possibly scroll to 3000px natively. See what I mean? But ScrollTrigger has code in place to flush that recorded value if you kill() all your ScrollTriggers. My guess is you forgot to do that(?)
  2. I can only reproduce that in Firefox and it appears to be caused by the fact that it alters the scroll value by a fraction. So, for example, if GSAP does a scrollTo tween to 1698 and sets it to exactly that value at the end and then you check it, Firefox actually reports it as 1698.3333740234375! So that goes beyond the threshold and triggers the next section. 🙄 Don't you love browser bugs? Here's a fork that takes an entirely different approach, with just one ScrollTrigger on the entire page that does work in the onUpdate to figure out which section to snap to, and another key is that I added "wheel" and "scroll" listeners that event.preventDefault() when there's a scrollTo tween in-progress: https://codepen.io/GreenSock/pen/oNwMQXz?editors=0010
  3. Here are two options: 1) repeatRefresh: true gsap.fromTo("div", {x: 0}, { duration: 2, x: () => innerWidth, repeat: -1, repeatRefresh: true }); This just forces the tween to invalidate() on repeat (clear out any starting values and re-capture the ending ones too). I switched to a .fromTo() so that we can specify x: 0 as the start, otherwise the invalidated .to() tween would just start from wherever it currently is. The only down side is the iteration that's running while you resize will finish at the original destination (and then the next iteration will be corrected). 2) re-create the tween in a "resize" handler let tween; function resetTween() { let progress = tween ? tween.progress() : 0; tween && tween.kill(); tween = gsap.fromTo("div", {x: 0}, {x: window.innerWidth, duration: 2, repeat: -1}).progress(progress); } resetTween(); window.addEventListener("resize", resetTween); Does that help?
  4. My only other guess is maybe you're setting up a scroller proxy in one environment that's contaminating another(?). For example, if you tell ScrollTrigger that for the main <body> it should use a proxy (so that you can leverage LocomotiveScroll), and then in the same app (still in the browser, no refresh), you've got ScrollTriggers set up on the <body> it'd still be trying to pull that data from the LocomotiveScroll(?) I'm just taking shots in the dark here.
  5. There's no way that by adding a simple onComplete it'd cause a bunch of issues in your React app - there must be something else going on, likely in whatever code you're calling in the onComplete. But I can confidently say that you don't need to worry about any caveats related to adding an onComplete to a timeline. It's super simple code internally. Nothing fancy at all. I wish I could offer more advice, but without seeing a minimal demo, it's virtually impossible for us to guess at what's going on there. Sorry. If you still need some help, just shoot us a minimal demo and we'd be happy to take a peek. Also, have you see the React article?: https://greensock.com/react
  6. Sorry, I don't understand your question/goal. Can you please elaborate?
  7. We can't effectively troubleshoot a live site (there are way too many factors and it's impossible to tweak things and see the effects) - if you need help, please provide a minimal demo in something like CodePen or CodeSandbox and we'd be happy to take a look. I'm curious - did you try removing ScrollTrigger from the equation and see if it fixes anything? I suspect you've got a CSS-related issue that has nothing to do with GSAP/ScrollTrigger.
  8. It' super difficult to troubleshoot blind, but perhaps you didn't gsap.registerPlugin(ScrollTrigger)? And that must be done when the window/document/body exists because ScrollTrigger needs those things to function.
  9. Yeah, since you want each one to start at a completely different spot, you have to have a different ScrollTrigger for each, so a .forEach() is necessary. Is there some reason you're trying to avoid a .forEach()? Is this the kind of thing you're looking for? https://codepen.io/GreenSock/pen/qBjyPOw?editors=0010
  10. I'm not sure I understand exactly what you're asking here, but in general yes you can absolutely stop a timeline and start another timeline whenever you want. GSAP offers a ton of controls like pause(), play(), etc. If you still need some help, I would recommend providing a minimal demo so we can see the issue in context.
  11. Sorry, I don't understand your question. You're welcome to apply native CSS scroll snapping - that still works since ScrollTrigger doesn't do any scroll-jacking. I'm not saying that addresses your question (because I don't understand what you mean), but I figured I'd mention it in case it helps.
  12. I'm a bit confused - your animation has all that built in. Just remove the scrollTrigger from the timeline and watch your timeline play on its own - it has all of those motions in it. See what I mean? Everything seems to be playing exactly the way you coded it. Am I missing something?
  13. It looks like you renamed your LocomotiveScroll instance "scroll" instead of "locoScroll"
  14. Welcome to the forums, @Haider Amin. We'd love to help, but unfortunately it's almost impossible simply by glancing at a wall of JS code that's just an excerpt. Please provide a minimal demo (like in CodePen) and we'd be happy to take a peek. I didn't notice any ScrollTrigger code in there at all. ScrollTrigger can do everything ScrollMagic does plus a LOT more, so it shouldn't be too hard to migrate over. Once we see the minimal demo, I'm sure we'll have more to say. Please keep that demo as minimal as possible (you don't need to include your whole project).
  15. Yay! Welcome back, Rich. Tween responsibly. Don't forget to take some breaks to sleep occasionally.