figure out y value on scroll

[maxvia]

Hi, 

 

I am quite new into gsap and would like to have some enlightenments on how you would proceed with this type of effect (see video below ) that I found on https://cultivatingthevanguard.com/ .

I am thinking of using scrolltrigger, probably make the div on the left sticky or absolute and give it a y value dependant of my scrolling activity. Where I am the most confused is how to calculate my y value. Is there anyway to figure out the value depending of my viewport?

Also is that how you would proceed?

Any advice is appreciated.

 

Thank you guys!

[akapowl]

Hey @maxvia

 

If I did not totally misunderstand what you are looking for, that is exactly what pinning is for.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/pin

 

 

 

Here is one example that pins one element (on the right) while the rest on the left is normally scrolling

 

See the Pen b38c1c388b8f6ba0db6311134234f972 by akapowl (@akapowl) on CodePen

 

 

 

Here is another example from the demos-page

 

See the Pen YzyqVNe by GreenSock (@GreenSock) on CodePen

 

 

 

And since you said, you were quite new to this, here is just a very basic example of the pinning part with a color-change animation-timeline attached.

 

See the Pen 81ef8bb8510db3756d8224841979ade2 by akapowl (@akapowl) on CodePen

 

 

 

Hope this helps you get on the way.

 

Cheers,

Paul

 

 

[mikel]

 

... just another concept to pin and change elements

 

See the Pen 3991238d734744756c3c38947a5428f1?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy scrolling

Mikel

[maxvia]

Awesome! Thank you very much to you two! This is exactly what I was looking for 

 

Cheers

 

Maxime