Jump to content
GreenSock

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

custom scroll on the whole page

Recommended Posts

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 🤲

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

 

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

 

  • Like 2
Link to comment
Share on other sites

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

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