Stagger in Scrolltrigger laggy

[zetdeq]

Hi,

 

I have a nuxt.js setup with a scrolltrigger and a gsap.to with staggering. Some of the blocks in the horizontal scroll move laggy other blocks move smooth. The stagger is used to create an elastic feeling between the blocks on scrolling. Without stagger they move smoothly.

Any idea how this can be solved?

Here is a link to a codesandbox: https://codesandbox.io/p/sandbox/dreamy-bhabha-bgwluf?file=%2Fpages%2Findex.vue&selection=[{"endColumn"%3A8%2C"endLineNumber"%3A52%2C"startColumn"%3A8%2C"startLineNumber"%3A52}]

[Rodrigo]

Hi,

 

IMHO you're over engineering this quite a bit. No need to run that funky onUpdate method you got there, just create the GSAP instance that moves all the elements and then plug ScrollTrigger into the mix. This seems to work:

export default {
  mounted() {
    let blocks = gsap.utils.toArray(".block");
    gsap.to(blocks, {
      xPercent: -100 * (blocks.length - 1),
      ease: "none",
      scrollTrigger: {
        trigger: "body",
        end: () => "+=300%",
        pin: true,
        scrub: 1,
        markers: true
      }
    });
  }
};

Also I strongly advice you against using body both as trigger and pin, since right now ScrollTrigger is pinning the whole  body tag and that could create some issues down the road.

 

Here is a fork of your example:

https://codesandbox.io/p/sandbox/zealous-elion-rbyxwd?file=%2Fpages%2Findex.vue&selection=[{"endColumn"%3A3%2C"endLineNumber"%3A50%2C"startColumn"%3A1%2C"startLineNumber"%3A35}]

 

Hopefully this helps.

Happy Tweening!

[zetdeq]

Hi,

 

Thanks for your reply. This was indeed me initial setup but the stagger is not working for each block individually in this case. If you were to add stagger: 0.03 for example the x will not stagger.

[mvaneijgen]

Hi @zetdeq for me the stagger works as expected, but maybe you want to have some other animation that is not clear to us, because you think you want to use stagger. Can you maybe explain what it is you're trying to do?

 

I would advise to first focus on the animation. and remove ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. 

 

https://codesandbox.io/p/sandbox/jovial-torvalds-26zuj2?file=%2Fpages%2Findex.vue&selection=[{"endColumn"%3A44%2C"endLineNumber"%3A40%2C"startColumn"%3A44%2C"startLineNumber"%3A40}]

 

you can also look in to adding a each to the stagger to have the distribution of the stagger based on an ease curve, something like:

 

stagger: {
	each: 0.3,
	ease: "power2.inOut"
}

See the stagger docs for much more information 

https://greensock.com/docs/v3/Staggers

[zetdeq]

Hi @mvaneijgen thanks for the reply!

What i am trying to create is a horizontal scroll (when scrolling vertical) and have the blocks stagger (increase the space between them) on scroll like on https://lenis.studiofreight.com/. On the example there is a part with 5 blocks that scroll horizontal the space between the blocks increases on scroll down and decrease on scroll up.

The codesandbox i provided does all that but soms of the blocks move with a bit of a stutter, not all of the blocks though..
The stutter is what i am trying to get rid of. 

[Rodrigo]

Hi,

 

If you want to create space between the elements on scroll down and then remove it on scroll up, the easy alternatives are either margin or padding, none of which are extremely performant. In order to keep the percentage based animation that is moving the blocks to the left working as it is right now my choice would be padding:

export default {
  mounted() {
    let blocks = gsap.utils.toArray(".block");
    gsap.to(blocks, {
      xPercent: -100 * (blocks.length - 1),
      ease: "none",
      paddingRight: 40,
      scrollTrigger: {
        trigger: "body",
        end: () => "+=300%",
        pin: true,
        scrub: 1,
        markers: true
      }
    });
  }
};

Other solutions could be crafted but they probably would require more time that we can dedicate to it in these free forums.

 

Hopefully this helps.

Happy Tweening!