Jump to content
Search Community

captainforg

Members
  • Posts

    3
  • Joined

  • Last visited

Everything posted by captainforg

  1. Thanks for the help guys, I wasn't able to solve it completely though. Temporarily I just created multiple gsap match media queries with another ScrollTrigger that pins the section but that is obviously not accurate since different users might scroll up & down with different speeds. I would probably revisit this later to ensure that pinning occurs "exactly" for 8 scroll ups Or 8 scroll downs and will share a codepen as well over here.
  2. Hello @Jack. Thanks for the quick help. Once again GSAP astounds with how simple it is to create such diverse and incredible animations ? I have already achieved the effect that I want in 15 minutes, one last thing, Observer does not seem to support pin that ScrollTrigger normally supports. I have tried to create a separate ScrollTrigger just to pin my container but then again when I scroll really fast the container div of the animation that I want to remain pinned flies off the screen. I can extend the end marker of this pinned scroll trigger further away but asking this if there is a cleaner way of pinning while using Observe?
  3. Hi, thanks for putting out a great library that does so many things so well but there's one thing I haven't been able to figure out - how to put a delay between two scroll events in ScrollTrigger? I know about the position parameter in ScrollTrigger and that is not what i am looking for since if the user scrolls very fast on a trackpad/mobile screen the animation completes very quickly. This is the reference which I am trying to recreate: https://www.sai-tex.com/circularity/ If you scroll down once, you are presented with a circle which only moves one step forward each time i scroll, no matter how fast I scroll on my trackpad. I have tried searching many forum posts here but haven't been able to find any post which describes this behavior. As far as I can understand I need to call ScrollTrigger.create() on my animation with some callback functions inside this create() function that move to the next part of my animation and disable scrolling for 100ms. How would I go developing something like this? Any help would be greatly appreciated. Thanks
×
×
  • Create New...