Scrolling panels

[Alexandra Spalato]

Hello,

I'm beginning a new project that I will build in gatsbyjs, but for the moment I'm doing a Proof of concept on codepen

on the right side we have text sections, and the top menu scroll to the sections

the clients want that when we go to a section, the image on the left bump up, and then when we scroll, the left panel with images scroll faster, so I have pinned the text sections

but I'm not having the initial slide up image,(but a little bug that make the image jump to the right, I also need to correct that) and also when I continue scrolling the section after overlaps the text which I don't want, so I imagine I have to put the end of the pin in another point but IDK exactly where....

Then they also want to be able to scroll the left images independently

... this is hapening when I arrive on section 4, (it seems that it's still pinned) but I don't want it like that

I want to scroll trough the images only if I scroll from the left part, but if I scroll trough the right part or trough the menu then it has to scroll as described in the beginning

after that I will have all in a loop it will be much better, but I'm just testing things!

I hope it's clear, as it's not so easy to describe...and I hope myself that I understood the client...

and of course I'm quite beginner in animation so excuse me if I ask basic questions !

Thanks in advance!

 

See the Pen GRoJjMJ by alexadark (@alexadark) on CodePen.

[ZachSaucier]

45 minutes ago, Alexandra Spalato said:

they also want to be able to scroll the left images independently

If this is true, then you need to have two separate, scrollable columns. Or at least a nested scrollable area for the left column. In order to update one when the other scrolls you could use the onUpdate function to of the one actually scrolling to affect the scroll position of the other.

[Alexandra Spalato]

Finally, the client don't mind about the image part scrolling independently, and I don't think it would be possible, as they will have not more images than text sections

so finally I have done this 

See the Pen pogJVww by alexadark (@alexadark) on CodePen.

I think he will like it, but what I would like to accomplish, is

- when a section enter the viewport: the image fade in up, and when we scroll the section then the images moves up and perhaps fades out just before leaving the viewport...

and the effect reverse when we scroll up in the other way

so basically the image to fade in and to arrive in the center of the viewport it happens automatically as soon as the section is in the viewport, then on scroll it continues going up and fades out, so for the second part the scroll controls

but if we reverse the scroll, then the scroll should control all the mouvement

but in the beginning it needs to be automatic or we don't see any image without scroll

...Sorry I have really difficulty to describe it in words ?

[ZachSaucier]

On 6/6/2020 at 11:03 AM, Alexandra Spalato said:

what I would like to accomplish, is

- when a section enter the viewport: the image fade in up, and when we scroll the section then the images moves up and perhaps fades out just before leaving the viewport...

and the effect reverse when we scroll up in the other way

so basically the image to fade in and to arrive in the center of the viewport it happens automatically as soon as the section is in the viewport, then on scroll it continues going up and fades out, so for the second part the scroll controls

but if we reverse the scroll, then the scroll should control all the mouvement

but in the beginning it needs to be automatic or we don't see any image without scroll

Sounds good  Let us know if you have any specific questions.

[Alexandra Spalato]

These are the questions, IDK how to accomplish that...

I have searched, but IDK how to couple an animation that happens automatically when enter the viewport (the image fade in up), then continue being controlled by scroll (fadein out on scroll) and reverse on scroll down...

[ZachSaucier]

There are multiple demos in the ScrollTrigger docs that can get you started. The one below might be the most relevant to what you're trying to accomplish?

See the Pen pojzxwZ by GreenSock (@GreenSock) on CodePen.

 

Unfortunately we don't have the capacity to build your animations out for you. If you have specific questions, feel free to ask and we'd love to help!