Jump to content
Search Community

horizontal scroll pause between each slide to break continuous scroll into parts.

prjbios test
Moderator Tag

Recommended Posts

Good afternoon, i have a very long page that utilizes scrolltriggers in several modules.  one of the modules on my pages has a horizontal scroll with a few slides and within each slide is an animation.   everything works pretty well except we have found during beta testing  that the user can scroll and very quickly through and past the horizontal "slider" into the regular vertical page.   overall the horizontal portion doesnt "feel" great and breaks the user experience.  we've tried doing "snap" points- but they snapped in odd ways that didnt feel natural.   

i've googled this, searched the forums, tried on my own but nothing is working or is overly complex to the point of getting overwhelmed at the complexity of some of these other "snap" solutions.

 

what im wondering is is there a way to add a bit of a "click" feel as each slide finishes. or some sort of anticipation and "pause" after each slide so the user doesnt whip trough the horizontal scroll?
 


i''d be very thankful for any assistance i can get on this, as it's become quite frustrating.  
 

const tl2 = gsap.timeline({
    scrollTrigger: {
        trigger: '.module_3_wrapper',
        start: "center center",
        end: "center center",
        pin: '.module_3_wrapper',
        scrub: 1,
        pinSpacing: true,
    }
});



let container = document.querySelector('.module_3');

let sections = gsap.utils.toArray(".module_3 .slides");

let scrollTween = gsap.to(sections, {
    x: () => -(container.scrollWidth - document.querySelector('.module_3_wrapper').clientWidth) + "px",
    ease: "none",
    duration: .1,
    scrollTrigger: {
        trigger: ".module_3_wrapper",
        pin: true,
        start: "center center",
        scrub: true,
        invalidateOnRefresh: true,
        end: `+=${container.offsetWidth}`,
    }
    
});

I found someone did something like this with a nest scrolltrigger, but i can't figure out how to merge what i have and what this does. but it has the exact effect im looking for. where it nicely locks between slides.

 

    let slides = gsap.utils.toArray(".slide");
    slides.forEach((slide, i) => {

    if (i) { // skip the first one.
        ScrollTrigger.create({
        start: () => ScrollTrigger.maxScroll(window) / (slides.length - 0) * i,
        end: "+=1",
        onEnter: self => gsap.to(".slide", {x: (-100 * i) + "vw", ease: "none", overwrite: true}),
        onLeaveBack: self => gsap.to(".slide", {x: (-100 * (i - 1)) + "vw", ease: "none", overwrite: true})
        })
    }
    });

 

See the Pen ExbMXxo by projectbios (@projectbios) on CodePen

Link to comment
Share on other sites

13 minutes ago, Cassie said:

Hey there @prjbios,

 

If you want to slow down the horizontal scroll you can move the end trigger further down the page.

e.g.

end: `+=${container.offsetWidth * 3}`
 

 

 

Does this help or am I misunderstanding?

 

Hi Cassie, thank you so much for responding.   

 

i think  what needs to happen it's basically putting each slide in a scrolltrigger and giving it a pin (stays on screen for a second before releasing to the next slide) effect.  right now the continuous scroll of the horizontal slider doesnt feel very good. and snapping doesnt either.  But i found a post buried here, that i can no longer find that had a solution that was exactly what i needed.  and it's the below code.    my only problem is i couldnt figure out how to integrate into my page flow like you see in my codepen.   because the below code acts as if the horizontal slider is the only main element on the page. 

    let slides = gsap.utils.toArray(".slide");
    slides.forEach((slide, i) => {

    if (i) { // skip the first one.
        ScrollTrigger.create({
        start: () => ScrollTrigger.maxScroll(window) / (slides.length - 0) * i,
        end: "+=1",
        onEnter: self => gsap.to(".slide", {x: (-100 * i) + "vw", ease: "none", overwrite: true}),
        onLeaveBack: self => gsap.to(".slide", {x: (-100 * (i - 1)) + "vw", ease: "none", overwrite: true})
        })
    }
    });


 

Link to comment
Share on other sites

9 minutes ago, Cassie said:

Oh ok, I get what you mean,

 

Well at the end of the day the 'horizontal scroll' is just an animation. You can 'scroll' anyway you want by making a timeline and spacing out each movement.
 

 

Oh wow, this might be it! it works just as i was hoping.  and how you're achieving this is an entirely different path than i was looking at.   thank you so much!     im going to test it shortly.



i have another question. i've looked it up a bunch and it doesnt appear to have an "easy" solve.  if i wanted to remove pin spacing an just have that horizontal scroller lock in the center of the screen vs doesnt full screen.  is there an easy solve for that?  the white padding that appears around some of my elements (such as the scroller) is really a bit frustrating.  

  • Like 1
Link to comment
Share on other sites

Are you maybe looking for pinspacing:false

Also - If you wanted to go with this type of a solution you'd need to tweak the calculation of the marker placement to be based around the slide container itself rather than the window.

Something vaguely like this? This is just a guess so apologies if it doesn't work, I figure most things out by trial and error. But basically you'll want to be adding a little more offset to the start marker on each one.

    let slides = gsap.utils.toArray(".slide");
    slides.forEach((slide, i) => {

    if (i) { // skip the first one.
      console.log('maybe?', myslides.offsetWidth / (slides.length - 0) * i)
        ScrollTrigger.create({
        trigger: myslides,
        markers: true,
        start: () => `top+=${myslides.offsetWidth / (slides.length - 0) * i} top`,
        end: "+=1",
        onEnter: self => gsap.to(".slide", {x: (-100 * i) + "vw", ease: "none", overwrite: true}),
        onLeaveBack: self => gsap.to(".slide", {x: (-100 * (i - 1)) + "vw", ease: "none", overwrite: true})
        })
    }
    });


 

Link to comment
Share on other sites

Oh wait I get what you mean. 

When the element is pinned the padding gets added so that you can carry on scrolling while it's pinned without the rest of the content catching up.

If you want to be able to view the content below the slider while that element is pinned you'll need to pin a container element that contains the 'pinned' section and the following content. That way the 'white padding' will be added underneath those items where you can't see it.

Does that help?

  • Like 3
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...