Jump to content
GreenSock

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

rubegoldberg

Members
  • Posts

    3
  • Joined

  • Last visited

rubegoldberg's Achievements

0

Reputation

  1. 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.
  2. 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
  3. 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: 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? 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!
×