Jump to content
GreenSock

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

Smooth scroll with scrollbar

Recommended Posts

Can anyone please help me to develop exactly same scroll as this example http://320and360wythe.com/team.
In this we can scroll manually and pause in between section. If we scroll more it will animate to next slide.

Link to post
Share on other sites

Hey @anujibin,

 

Welcome to the GreenSock Forum.

 

Please take a look at this thread.

 

Happy tweening ...

Mikel

  • Like 2
Link to post
Share on other sites

Thanks @mikel. But I am not able to use that in my case. When I remove overflow:hidden , it will break all the functionalities. This is my  

See the Pen bGdryBa by anujibs (@anujibs) on CodePen

  example to shown my progress. It would be great if someone can help me to smoothen this transition animations,.

Link to post
Share on other sites
2 hours ago, anujibin said:

I am not able to use that in my case. When I remove overflow:hidden , it will break all the functionalities.

What do you mean? Your demo doesn't have overflow: hidden in it at all.

 

2 hours ago, anujibin said:

It would be great if someone can help me to smoothen this transition animations,.

Have you tried playing around with the ease value? We have a handy ease visualizer that may be able to help you get the ease that you want.

Link to post
Share on other sites

It looks like you now have quite a few helpful examples for what you had hoped to accomplish. But I'm still not understanding why you are adverse to using overflow:hidden? It's one of the most commonly used things in CSS and can be used for creative results as shown here in these examples and so many others when coupled with GSAP.

 

Unfortunately we can't really rebuild everything to fit the specific page / project you are building.

  • Like 2
Link to post
Share on other sites

Hey @anujibin,

 

overflow: hidden is a must for this slider concept

With or without animations on the slides, that's how it works.

 

See the Pen bGdomrY by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

 

  • Like 4
Link to post
Share on other sites

Hey @anujibin,

 

Maybe you are just looking for a 'simple scrollTo solution'.
Then no overflow: hidden might make sense.
Here's an example ...

 

See the Pen xxGPPyg by mikeK (@mikeK) on CodePen

 

Happy weekend and tweening ...

Mikel

 

  • Like 3
Link to post
Share on other sites

@mikel Thanks.
Above example complete my 50% requirement. Need to add mouse scroll section scroll and url change to this.

Link to post
Share on other sites

Hey @anujibin,

 

If the sections / slides all have the same height (= window height!), use the slider version.
If not, then the scrollTo version.
You can't get everything ...

  • Like 2
Link to post
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.

×