ScrollTrigger how to make content scroll the opposite direction

[Antdev]

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

[Trapti]

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. 

[Antdev]

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.

[Antdev]

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

[Trapti]

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

[Antdev]

Thank you very much Trapti - that is a great solution for me. Oh and I like the addition to make the square move back:)