custom scroll on the whole page

[KatushaSan]

Hello. Tell me please. The page uses custom scrolling. Because of this, the animation does not work when scrolling through the page. How to bind a block with a scroll to animation? 👻

 

Perhaps the answer has already been given. but I'm probably not looking well, if there is, please send a link 🤲

[akapowl]

Welcome to the GSAP forums @KatushaSan

 

Sounds like you might be looking for ScrollTrigger.scrollerProxy() ?

 

If that doesn't help, a bit more context and a minimal demo would be greatly appreciated!

[KatushaSan]

@akapowl thanks, I will know about this method, but a simple one helped me 

scroller: '.b-page-wrapper'

I just used it wrong

 

can i have another question?
I have a block which has an absolutely positioned block
when scrolling, it should slide from top to bottom
I try to do it this way, but it doesn't work for me
please tell me how can i do this?
it's like parallax, but in one direction

 

link to code 

See the Pen RwxzZbR by KatushaSan (@KatushaSan) on CodePen

[akapowl]

 

Usually when you have a question that is on a whole different topic than your initial question it would be best to start a new thread, so people searching for solutions on certain problems can find them easily. Please keep that in mind for the future.

 

Your code has several problems. For one you have a typo on the selector for the array. You wrote wrapp instead of wrap.

 

Setting toggleActions and scrub on the same ScrollTrigger won't help much. Those two are different methods of how to have the ST control the tween. If both are set, the scrub will always take control of the tween and the toggleActions will do nothing.

 

You might also want to once again look up in the docs how start and end of a ScrollTrigger work, because the way you have set them up, I don't think makes much sense. I left some comments in the codepen below, but I can not explain everything to you in detail. For an effect like that you will have to make sure though, that your image would be taller at any time than the container that has the overflow: hidden set and tween it up for the amount that it is taller than the container.

 

Please also keep in mind that these forums are not intended to deliver custom code solutions or tutorials on how to achieve certain effects. We are happy to help with any specific questions related directly to GSAP though.

 

Happy tweening!

 

See the Pen ExoBwdw by akapowl (@akapowl) on CodePen

 

[KatushaSan]

@akapowl thanks, although this is not what I need, but I'm grateful. I will sort this out😅