Jump to content
Search Community

Using ScrollTo within ScrollTrigger to scroll-snap

rubegoldberg test
Moderator Tag

Recommended Posts

Hello GSAP Community, 

 

Here's my situation: 

I'm creating a website with barba.js, so it has fluid page transitions. There's a page showing all projects and a page showing all articles, they are displayed as teasers. Since the teasers are supposed to have the same behaviour and animations I gave all of them the same class to use as selector in gsap.

 

What I try to achieve: 

When scrolling down, triggering a teaser, I would like to scroll to the center of that triggered teaser. So the user purposely gets stopped in his scrolling and goes one element at a time.

 

How I try to achieve it: 

Basically, I am creating a ScrollTrigger for every teaser when the page is loaded. When I change the page, I call the kill method on existing scroll triggers, so they cease to exist. So when I navigate between pages I make sure the ScrollTriggers get cleaned up before creating the new one that uses the exact same function (and selectors).

 

What my problems are:

  1. It seems like the ScrollTrigger itself is being killed – it's undefined and everything after resetting the page and does not trigger the class that is toggled by the ScrollTrigger – but when I add the scrollTo functionality it gets messy. The ScrollTrigger and scrolling to the center of the teaser works for the first page I visit, but when I change to the other page the new ScrollTrigger seems to get stuck where the old teasers were and I can't scroll the page properly (I hope the CodePen explains well what I mean). Maybe there's something obviously wrong with my code or approach? Or any advice on how to make this work as expected?
  2. It does not feel very nice to be stopped while scrolling (duh, I know), but since it's a customer requirement I was wondering if there is a way to make it feel less like a restriction but more like the user is being guided?

 

What I already tried: 

  • I tried native scroll-snap, which would have been nice and easy to use – but it was buggy at best when it comes to it's behaviour for what I am trying to do.
  • I had a browse through the forums here (great and helpful work all around, btw) and found a similar question, so I adapted my code roughly to the solution suggested there. I guess it feels much different since that example has full screen sections.
  • To make sure my project setup with barba.js is the actual problem I've made a CodePen and recreated the basic things that play together here. So there's the change in page and the creation of the ScrollTrigger for the teasers on the given page, and also the scrollTo functionality. The problem still occurs in the CodePen.

 

I hope you guys can help me out :)
Thanks a lot!

See the Pen YzqGXwz by seamofreality (@seamofreality) on CodePen

Link to comment
Share on other sites

Hey rubegoldberg and welcome to the GreenSock forums. Thanks for the surprisingly minimal demo! Thank you for not including Barba and your whole setup :) 

 

The issue is that you can't have ScrollTriggers with duplicate IDs. IDs should be unique and you can't select multiple ScrollTriggers that share an ID for some reason using .getById() (it only returns one in that case). But if you're going to kill all of the ScrollTriggers, just use 

ScrollTrigger.getAll().forEach(st => st.kill());

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

  • Like 1
Link to comment
Share on other sites

Hey there Zach, 

 

Fair enough! Thank you, that's perfect, it seems to work in my project setup as well.

I did not think about getAll() at all and was so worried about keeping track of all the scroll triggers. 🙄

Any suggestions on how I could make the snap feel nicer? Maybe you have seen some great examples or know some references?

 

Thanks a dozen

Link to comment
Share on other sites

2 minutes ago, rubegoldberg said:

Any suggestions on how I could make the snap feel nicer?

If you're required to snap to the very next entry and the user has control of scrolling beforehand, no, there's not much you can do to help. But I think if you show your client what happens if a user scrolls fast and gets to a section they might be more open minded about changing.

 

This sort of thing (without the requirement of snapping to the very next entry) is pretty much what CSS snap points was made for. So I'd try to convince them to use that probably? It's hard to say for sure not knowing the actual project.

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

But I think if you show your client what happens if a user scrolls fast and gets to a section they might be more open minded about changing.

I hope so too, fortunately the client is very reasonable instead of being stubborn when it comes to something not working out in favor of the user. He might ask me kindly to find a solution to generally slow down scrolling tho, since the website should be "taken in slowly and aware".

 

Thanks again, I'm really glad you've got such a well-tended to forum going.  

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