Jump to content
Search Community

Vilas

Members
  • Posts

    5
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Vilas's Achievements

  1. Thank you guys! I have a rather long page with 3-4 sections in between which are dynamic and slow. Simply using the .sort() method didn't work But using the verticalSort() helper function you suggested did the trick. I just had to include ScrollTrigger.refresh() after the sorting to make it work properly: function verticalSort() { let scroll = window.scrollY; ScrollTrigger.getAll().forEach(t => t._sortY = t.trigger ? scroll + t.trigger.getBoundingClientRect().top : t.start + window.innerHeight); ScrollTrigger.sort((a, b) => a._sortY - b._sortY); ScrollTrigger.refresh(); }
  2. I think I have the exact issue as you. Is it the same as here? Basically a section that loads a bit slow, will mess up the triggers in the sections after it
  3. Hi guys, I created this super basic codepen file to illustrate the issue. So the problem is that the middle section is waiting for some data before initializing the scrollTrigger+pinning. Once the data is loaded and the pinning happens, it throws off the position of all the scrollTriggers below it. Running scrollTrigger.refresh() doesn't seem to do anything in this case. How can i re-calculate the position of all the scroll triggers once the data finishes loading?
  4. This is awesome! Thank you so much! So using the .call function injects the callback into the timeline and runs is every time the animation plays? but with updated parameters? That seems super useful!
  5. Hi guys, I have a gsap timeline which animates an svg circle. (Scale and color). What I'm trying to achieve is to pass a dynamic color when clicking different buttons, for example: buttonA.addEventListener('click', (e)=>{runAnimation(DYNAMIC_VALUE)}); and then use that value here: tl.to(circles, { stagger:{ each: 0.05}, ease: "none", fill: `#${DYNAMIC_VALUE}` }) It seems that the dynamic value is always using the initial value but can't be changed later. Any idea on how to bypass this issue? Edit: seems that using a function + tl.invalidate() works, however, spam clicking the button seems to break the animation. Any ideas? Thank you in advance!
×
×
  • Create New...