Share Posted February 27, 2020 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 comment Share on other sites More sharing options...
Share Posted February 27, 2020 Hey @anujibin, Welcome to the GreenSock Forum. Please take a look at this thread. Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
Author Share Posted March 4, 2020 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 comment Share on other sites More sharing options...
Share Posted March 4, 2020 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 comment Share on other sites More sharing options...
Share Posted March 4, 2020 The following example by @OSUblake might be helpful also (you would need to update it to GSAP 3). See the Pen RjKdLe by osublake (@osublake) on CodePen Why is overflow:hidden such a deal breaker ? 1 Link to comment Share on other sites More sharing options...
Author Share Posted March 5, 2020 @ZachSaucier@Shrug ¯\_(ツ)_/¯ Oavrflow hidden in the following example. When we try to remove the .slides-container div overflow hidden the functionality will break. See the Pen JGbBzB by mikeK (@mikeK) on CodePen Link to comment Share on other sites More sharing options...
Share Posted March 5, 2020 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. 2 Link to comment Share on other sites More sharing options...
Share Posted March 5, 2020 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 4 Link to comment Share on other sites More sharing options...
Share Posted March 7, 2020 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 3 Link to comment Share on other sites More sharing options...
Author Share Posted March 9, 2020 @mikel Thanks. Above example complete my 50% requirement. Need to add mouse scroll section scroll and url change to this. Link to comment Share on other sites More sharing options...
Share Posted March 9, 2020 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 ... 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now