maxvia Posted November 21, 2020 Share Posted November 21, 2020 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! gsap-scroll.mp4 Link to comment Share on other sites More sharing options...
akapowl Posted November 21, 2020 Share Posted November 21, 2020 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 3 Link to comment Share on other sites More sharing options...
mikel Posted November 21, 2020 Share Posted November 21, 2020 ... just another concept to pin and change elements See the Pen 3991238d734744756c3c38947a5428f1?editors=1010 by mikeK (@mikeK) on CodePen Happy scrolling Mikel 3 Link to comment Share on other sites More sharing options...
maxvia Posted November 21, 2020 Author Share Posted November 21, 2020 Awesome! Thank you very much to you two! This is exactly what I was looking for Cheers Maxime 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