How can I slow down a wheel scroll animation speed?

[Evgeniia]

Hi, everyone! Hope, you can help me 

So, I used this topic for creating half-cylinder text scrolling animation: 

 

Here is my pen:

 

 

My questions:

1. How can I slow down a scroll speed of the .wheel__wrapper? It scrolls very fast and user doesn't have time to even read a text.  

2. How can I adjust snapTo in my case so that it would snap to next text element on scroll as in attached topic?

 

Thanks in advance!

 

 

See the Pen BaMqyBe by EvgeniiaShirshikova (@EvgeniiaShirshikova) on CodePen

[mvaneijgen]

Hi @Evgeniia welcome to the forum!

Check out this tutorial how to work with ScrollTrigger 

 

 

So increasing the scroll distance is what you're looking for. I've set it to 3 times the window height, but you can change it to what ever feels right for the effect. The snapping was already correct, but I would set it to 1/10, because you start at item one so you want to subtract it from the total. 

 

I've also placed some comments in your JS to explain certain properties, be sure to read thought them. 

 

Hope it helps and happy tweening! 

 

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

[newguy123]

Hi

You can try make the site longer, ie, give it more height

Try sticking this css into the body or your main div:
height: 500vh;

That will make the height 5 times the regular viewport height.
So 100vh is same as 1 time the viewport height
So if you want to make it 10 times more, you would give it a height of 1000vh

Well, that's one way of doing it. There's probably other better ways also

[Evgeniia]

1 hour ago, mvaneijgen said:

Hi @Evgeniia welcome to the forum!

Check out this tutorial how to work with ScrollTrigger 

 

 

So increasing the scroll distance is what you're looking for. I've set it to 3 times the window height, but you can change it to what ever feels right for the effect. The snapping was already correct, but I would set it to 1/10, because you start at item one so you want to subtract it from the total. 

 

I've also placed some comments in your JS to explain certain properties, be sure to read thought them. 

 

Hope it helps and happy tweening! 

 

 

 

Thank you so much! It helped me a lot! 

I tried to use a pin property at the website which I'm building now, but that section worked not correctly, I don't know why. So that I had to use long height of the section and the sticky position of the container. In the codepen it works just fine.

I adjusted properties which you adviced me on my website, it works amazing!

[Evgeniia]

1 hour ago, newguy123 said:

Hi

You can try make the site longer, ie, give it more height

Try sticking this css into the body or your main div:
height: 500vh;

That will make the height 5 times the regular viewport height.
So 100vh is same as 1 time the viewport height
So if you want to make it 10 times more, you would give it a height of 1000vh

Well, that's one way of doing it. There's probably other better ways also

HI! It doesn't do anything with scroll speed. I used that for sticking container to the top of the section while animation is spinning.