Antdev Posted March 20, 2022 Share Posted March 20, 2022 Hi there I am making a vertical timeline that will have 10 content areas. I want it so that from the initial view of content area 1 that content area 2 scrolls down from the top rather than scrolling up from below content area 1. The idea is you start at the start of a timeline that continues upward - it makes more sense when testing on a touch screen device. Note the browser scroll bar will not be displayed as this will be packaged up as a full screen app with no browser elements visible. Is there a clever way to do this in ScrollTrigger / GSAP? Thanks in advance Anthony See the Pen ExoyxKZ by antdev (@antdev) on CodePen Link to comment Share on other sites More sharing options...
Trapti Posted March 20, 2022 Share Posted March 20, 2022 Hey, I am not able visualize the problem, If you can explain little more will be helpful. But it seems like you can use Scrolltrigger's direction for this. 1 Link to comment Share on other sites More sharing options...
Antdev Posted March 20, 2022 Author Share Posted March 20, 2022 2 minutes ago, Trapti said: Hey, I am not able visualize the problem, If you can explain little more will be helpful. But it seems like you can use Scrolltrigger's direction for this. Thank you for your reply. To try and explain it better. Imagine you are starting at the ground floor of a high rise building and are going to take the elevator upwards. So using touch screen functionality I would drag downwards and the first floor would scroll down into view. The ground floor would move downwards too and out of view. I will look into the link you have provided - thanks again. Link to comment Share on other sites More sharing options...
Antdev Posted March 20, 2022 Author Share Posted March 20, 2022 I have now worked out a way to do this using the following: window.scrollTo(0, document.body.scrollHeight); Here is an updated codepen. Not sure if this is the best solution though and if perhaps gsap offers a better solution. See the Pen eYyzYEd by antdev (@antdev) on CodePen Link to comment Share on other sites More sharing options...
Solution Trapti Posted March 20, 2022 Solution Share Posted March 20, 2022 Hey, In GSAP you can use .scroll() for the same. Here is the example. See the Pen QWaEwEd??editors=0010 by tripti1410 (@tripti1410) on CodePen 2 1 Link to comment Share on other sites More sharing options...
Antdev Posted March 20, 2022 Author Share Posted March 20, 2022 Thank you very much Trapti - that is a great solution for me. Oh and I like the addition to make the square move back:) 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