Jump to content
GreenSock

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

How to snap instantly on slight scroll?

Recommended Posts

How do I create a similar snapping effect like Fullpage.js? Is it possible with the snapping property in ScrollTrigger?

From what I've tried, it seems snapping is always initiated when the element has passed halfway the viewport. I would like a far quicker response, when only a few pixels have been scrolled. 

 

This is the snapping-effect I would like to create with ScrollTrigger: 

https://alvarotrigo.com/fullPage/extensions/parallax.html

 

I've added a codepen to show what I've tried so far.

See the Pen RwraVNO by kaspervdm (@kaspervdm) on CodePen

  • Like 1
Link to comment
Share on other sites

I actually just answered practically the same question here:

Given snap only affects the end position of the scroll and doesn't kill off the normal scroll, you'd be better off using the callbacks of ScrollTrigger to fire off a ScrollTo animation instead (like I did in the thread above).

 

To handle the layering you could use position: sticky instead of pinning since pinning messes up the scroll stuff:

See the Pen NWxNEwY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Note that I used an index and calculation of where to scroll inside of the goToSection function because otherwise the scroll position is off when scrolling up due to position: sticky.

 

EDIT: Note that this approach is a hack and I don't really recommend using it in most cases. ScrollTrigger is not built to scroll-jack like this. See my post below for more info.

Link to comment
Share on other sites

I'm also trying ScrollTrigger and can't seem to snap vertically (and I'm still kind of green with GSAP).

If I understand correctly, we should use the onEnter and onLeave events to trigger a ScrollTo animation, so it moves to the correct panel?

(in your reply's Codepen, the animation has some faults sometimes, either the scroll stops responding or the animation is triggered back to start when moving backwards ).

Link to comment
Share on other sites

Hey @BMateus and welcome to the GreenSock forums.

 

Try refreshing the page/demo. I believe I already fixed the issue going backwards in an edit. Let me know if that's not the case for you.

 

Also note that if you don't need the layering you can use the demo in the linked thread (it's very similar but uses an element reference instead of a calculated position).

Link to comment
Share on other sites

I think the only way to do this reliably would be to hide the overflow while the animation is happening. 

See the Pen abdmXGV by GreenSock (@GreenSock) on CodePen

 

But this likely causes undesired effects in browsers that always show the scrollbar if there's scrolling. So you might consider hiding the scrollbar permanently in your site or using a custom scrollbar.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
On 6/12/2020 at 10:39 PM, ZachSaucier said:

I actually just answered practically the same question here:

Given snap only affects the end position of the scroll and doesn't kill off the normal scroll, you'd be better off using the callbacks of ScrollTrigger to fire off a ScrollTo animation instead (like I did in the thread above).

 

To handle the layering you could use position: sticky instead of pinning since pinning messes up the scroll stuff:

 

 

 

Note that I used an index and calculation of where to scroll inside of the goToSection function because otherwise the scroll position is off when scrolling up due to position: sticky.

Hi Zach,

 

I also encounter issues with ScrollTo error.  On my first scroll down the page, there are no error popping up on DEV TOOLS. Errors sufface as I scroll up the page.

 

Kindly advise what should i do to remedy the situation, thanks.

 

 

Link to comment
Share on other sites

3 hours ago, hugoyong said:

 

Kindly advise what should i do to remedy the situation, thanks.

Please create a minimal demo so that we can see what's going on and explain your issue, likely in a new thread:

 

Link to comment
Share on other sites

  • 2 months later...

Hey @ZachSaucier how's it going? I've found your demos really helpful. I've got a question about your layered pinning/ScrollTo demos. I'm having trouble when there is content above/below. 

 

I forked the demo and added a div with a height of 100vh above the pinned section. In this demo when I try scrolling it just tries to snap back to the top.

 

See the Pen ZEObrdR by ryandejaegher (@ryandejaegher) on CodePen

 

How would you approach this kind of layout to accommodate sections above/below a pinned area

 

I was hoping to use the ScrollTo plugin so that it could snap to that section. 

Link to comment
Share on other sites

@ZachSaucier Awesome that should work! Would there be any advantage to creating an array of the panels and then using that for scrollTo?

 

var panels = gsap.utils.toArray(".panel")

function goToSection(i, anim) {
  gsap.to(window, {
    scrollTo: {y: panels[i].offsetTop + firstElem.offsetTop, autoKill: false},
    duration: 1
  });

 

Link to comment
Share on other sites

First of all, thanks for this, it does what I was looking for!

 

I just have one question: Is it possible to make it just a little less "sensitive"? So that it will stop after the first section and require a new input to move to the next?

 

When I scroll with my touchpad, it usually scrolls multiple sections. Maybe due to the scroll inertia of the touchpad?

Link to comment
Share on other sites

  • 1 month later...
On 10/14/2020 at 3:27 AM, ZachSaucier said:

I answered that above in this thread:

 

Hi Zach,

 

I copy and paste your HTML, CSS and JS, also used the resources of your example.

My problem is when I am scrolling down:

-  Scrolling from Description to Section 1 is ok.

-  From section 1 jumping to Section 2, 3 and 4 without stopping.

 

When I scroll back to top:

- Scrolling from Section 4 to 3 is ok.

- Then from 3 scrolling to Section 2, 1 and to the Description div without stopping.

 

I have this problem with all other GSAP examples of ScrollTo but not with other plugins like fullpage.js

 

 

Help please!

 

I am using Chrome, on desktop and my page running in my localhost using XAMPP.

 

 

Link to comment
Share on other sites

Hey Creative Frog and welcome to the GreenSock forums. 

 

It's impossible for us to help debugging without a minimal demo so if you're seeking help please provide one.

 

It should be said that ScrollTrigger is not built to scroll-jack like what this approach does. The approach above is a hack and I don't really recommend using it. If you really need this sort of functionality then you'll need to either build the functionality yourself or use an existing tool like fullpage.js. But even then, depending on your needs, there are likely to be issues because web browsers are simply not built to work in this sort of way. 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Hi Zach,

 

With the help of this post i have created this: 

See the Pen NWRqLbd by Guido-WPExpert (@Guido-WPExpert) on CodePen

 

So i have a section that behaves regular. Then a section with two columns and in the right column i have the colored panels that will overlap each other. Followed by a regular section again.

 

If i scroll it works. But i wan to have the colored panels snap into place. I can't figure it out. 

 

What i am trying to do is something like this: Kati Forner - Welcome  (scroll down to Featured Projects )

 

Would really appreciate some help ;-)

 

Thanks

Guido

  • Like 1
Link to comment
Share on other sites

Hey Guido, welcome to the GreenSock forums.

 

Again, ScrollTrigger is not built for scroll jacking like this. It's not officially supported, the demos above (and in the thread I link to below) are experiments as to what is possible. 

 

Perhaps this thread is more relevant to what you're trying to do:

 

Link to comment
Share on other sites

  • 1 month later...
On 10/13/2020 at 9:32 PM, ZachSaucier said:

is this possible to do one in horizontal ?

 

Hey Ryan and welcome to the GreenSock forums. You could do something like this:

 

 

 

 

Link to comment
Share on other sites

7 hours ago, CADS - Team said:

is this possible to do one in horizontal ?

Sure, you'd apply the same technique to a scroller that goes horizontally and use horizontal: true.

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.
×