Vertical automatic scrolling panel with ScrollTrigger

[Fat Pixel]

Hey everyone,

 

I've been working on a site that shows a side panel which vertical scrolls items automatically (and smoothly). Inspired by this example: https://www.buildinamsterdam.com/

 

See the codepen attached for my working example. It's a simplified version of what I implemented in the site.

 

I added a div which Scrolltrigger watches and based on that, it'll set the timeline speed. Also, it watches for scrolling, pausing the animation and starting it again

 

It's working... but not 100% to my taste, it just feels a bit off. You can scroll faster than the animation. So if you scroll vigorously, it's not really synced with the animation anymore. Also, you can't start with scrolling up as your first action.

 

Do you have any pointers to improve this? Does this solution make sense at all or is there a way better solution that I didn't think of?

See the Pen VwqyByg by fatpixelstudio (@fatpixelstudio) on CodePen

[mvaneijgen]

Hi @Fat Pixel welcome to the forum and thanks for being a Club Greensock member 🎉

 

I've inspected the original a demo bit, and it seems like they are really scrolling the page (or scrolling something) because the image really stops if it's at the bottom. That was also my original idea, because you want to have the 'feel' of just scrolling, so why not scrolling?

 

So the direction below is really flipped on its head of your original example. I use the scrollToPlugin to just scroll the page to the bottom and then use the Observer plugin to check if the visitor is scrolling. If they are I kill the original animation and start a new one when they stop.

 

I also check in what direction they are scrolling and change the direction of the animation. The only thing I've not done is calculate the duration based on where the scrollbar is now, so it becomes really slow when you already far down the page.

 

See the Pen ExGQaez?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

If this is not the route you want to go down I was also thinking of creating a infinite looping container, so that you can really move the images what ever amount to get it closer to feeling like real scrolling, because I think that is holding back your original demo, the scrolling feels limited and the fun comes from really throwing the images around. The Seamlessly loop elements along the x-axis should be helpful if you want that.

 

Hoop dat het helpt en veel geluk! 

[Fat Pixel]

Hi @mvaneijgen, thank you so much for you thoughtful reply!

Your solution of "just scrolling" is also what I went for in the first place. But I used plain JS to scroll a few pixels in iterations. Your solution with  scrollTo in GSAP is a nice suggestion. I'll dive into that!

 

Also, if this doesn't work I'll invesitigate the looping container. The link you provided didn't work for me (it links to #loop), but I'll dive in the documentation.

Nogmaals dank

[mvaneijgen]

My bad I've updated the link. Good luck and let us know which route you've end up taken! 

 

Graag gedaan 😝

[Cloud89]

Hey, I'm working on a similar concept to yours @Fat Pixel , do you have any recommendations as to which approach you found better?
I also want to account for mobile devices.
 

[Fat Pixel]

Hi @Cloud89

 

I went with a little refinements on the solution that @mvaneijgen posted.

 

If the auto scrolling was not a requirement for this project, I would have used the "just let the user scroll" option. My feeling is that this way would be more usable and less "laggy" for the user.

 

But, on mobile devices, I just used a regular way of scrolling, with a long page the user can scroll through.

 

You can see the result of the live site here: https://great-things.nl

[Cloud89]

Hey @Fat Pixel sorry I forgot to reply! I ended up going with mvaneijgen's suggestion and it worked out great!
Your great-things website looks fantastic!

[Cloud89]

Hey @mvaneijgen I followed your reccomendation and created a page based on your example with 4 columns. However the https://www.buildinamsterdam.com/cases example has the second column scrolling faster than the rest.

This creates a nicer effect as one column scrolls faster.

Do you have any simple tips on how to achieve this in the example you provided?

[mvaneijgen]

Hi @Cloud89, 1989 what a fine year (how is 34/35 treating you?🤣 )

 

It has been some months, do you maybe have a minimal demo we could take a look at? I would say just change the duration of the autoScroll for each column and find a sweet spot where they all move at a slightly different speed. Probably shaving of a second will already have a big impact depending on how larger your columns are.

[Cloud89]

Hey @mvaneijgen I'm not that old yet 😀 only 26
Here is a small example

See the Pen ExJpmwr by dhruvy1 (@dhruvy1) on CodePen

of what I have made so far.

My actual project is in SolidJS which is a bit tricky to get all into a CodePen.

As I am scrolling the whole window I am not sure how I can just change to scroll the columns or adjust them scrolling individually.

I also want to allow the user to scroll or change the scroll direction for all columns when they use the mouse wheel.

 

Appreciate your help 😀

[mvaneijgen]

2 hours ago, Cloud89 said:

I'm not that old yet 😀 only 26

Welp, I'm from 89 and now I feel old. 🙃

 

I think this logic will not work with what you want. The whole page is scrolling, so in theory the images are not moving the page is moving. I think in your case you want to have a 100vh section and don't allow the page to scroll. Then create an animation where you move all the columns up their own height. If they all have the same height you could play with their duration to have some go quicker an others slower or if they have different heights, they will already have a different speed built in. 

 

When that is done you could look in to the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ and watch for scroll events and then speed up the timeline with .timescale() https://gsap.com/docs/v3/GSAP/Timeline/timeScale()/  and then do the same with .reverse() 

 

In my head this all seems fairly doable, but probably while building you'll come a cross difficult parts, I would just open up a code pen and pick the most simple parts and start building form there. Personally I keep forking my work, so that I can fall back on earlier versions. But if you're stuck just post back here and show us where you're at. Hope it helps and happy tweening!