Jump to content
Search Community

scrollTrigger and snapping

Vadym S. test
Moderator Tag

Recommended Posts

Hi, Is there a way to make snapping not to closest point but to next depending on scroll direction

 

The code:

$('.image-shrink-animation').each(function(){
    let tl = gsap.timeline({
        scrollTrigger: {
            trigger: $(this).find('.pinned-block'),
            pin: true,
            start: "top+=300px center",
            scrub: false,
            snap: {
              snapTo: 1/4,
              duration: {min: 0.01, max: 0.01}
            },
            end: "+=2000",
            onUpdate: (function(){
                let progress = arguments[0].progress,
                    bgimg = $(this).find('.image-background-wrapper');

                console.log('///' + progress)

                if (progress >= .75) {
                    // do smth
                } else if (progress >= .5) {
                    // do smth
                } else if (progress >= .25) {
                    // do smth
                } else {
                    // do smth
                }
            }).bind(this)
        },
    }); 
});

What I want:  if progreese 0.02 and  direction = 1 -  I want to snap to 0.25, not to 0.0

 

console.png.cd756c02c679636b17e6a98e59e7a96a.png

 

 

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.
×
×
  • Create New...