GSAP ScrollTrigger vertical full screen with snapping not working

[goellner]

The snapping is not working as expected, I want it to snap to the nearest full screen section. The only point thats working is the third slide. 

See the Pen mdOpKxW by goellner (@goellner) on CodePen

[tailbreezy]

Hello goellner, 

 

Maybe this will help.

 

gsap.registerPlugin(ScrollTrigger);

const slides = [...document.querySelectorAll(".slide")];

ScrollTrigger.create({
  trigger: ".slides",
  markers: true,
  start:'top top',
  snap: {
    snapTo: 1 / (slides.length),
    duration: { min: 0.2, max: 0.6 },
    ease: "none"
  }
});

 

[akapowl]

 

Hey @goellner

 

It looks like 

 

snapTo: 1 / (slides.length + 1)

 

works like you intend.

 

See the Pen 6ff95c629e753916d4a913da8eb7cbdc by akapowl (@akapowl) on CodePen

 

Is that better?

 

Edit:

Or set the start to 'top top' (which by default is 'top bottom' when the ScrollTrigger is not pinning) and use the slides.length like @tailbreezy suggested.