Jump to content
GreenSock

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

GSAP ScrollTrigger vertical full screen with snapping not working

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

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"
  }
});

 

  • Like 2
Link to comment
Share on other sites

  • Solution

 

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.

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×