Milan_K Posted July 11, 2021 Share Posted July 11, 2021 Hi! I need a little help with my scroll trigger animation. The blue aside bar is supposed to stop being pinned about 50px above the footer. It works pretty much fine on smaller screens but on higher viewports it's unpinned very high. How can I change this behavior so that when you scroll to the bottom of a page aside bar is always 50px above the footer? Also is there a way to make this animation smooth? See the Pen OJmRooR by Milan_K (@Milan_K) on CodePen Link to comment Share on other sites More sharing options...
Milan_K Posted July 11, 2021 Author Share Posted July 11, 2021 If you click on "edit this code pen" you should be able to put it on a taller screen and see what i mean. Link to comment Share on other sites More sharing options...
mikel Posted July 11, 2021 Share Posted July 11, 2021 Hey @Milan_K, Welcome to the GreenSock Forum. It is better this way? See the Pen oNWzawx by mikeK (@mikeK) on CodePen What do you mean by 'this animation smooth'? Happy tweening ... Mikel 4 Link to comment Share on other sites More sharing options...
Milan_K Posted July 11, 2021 Author Share Posted July 11, 2021 Hi @mikel, Thank you! It is so much better now! Is there a possibility to make pinned element not being pinned instantly but with a little scrub? That was what i meant. Sorry if it wasn't clear. Link to comment Share on other sites More sharing options...
GreenSock Posted July 12, 2021 Share Posted July 12, 2021 Something can't be gradually pinned. It's either pinned or not, but you could certainly add smooth scrolling to the entire page or you could animate the pinned element on the y-axis to make it LOOK like it's gradually pinning. Like put it 50px lower than it normally should be, then animate that y back to 0 when the pinning occurs. Just an idea. Good luck! 2 Link to comment Share on other sites More sharing options...
mikel Posted July 12, 2021 Share Posted July 12, 2021 Hey @Milan_K, ... with a little help of @GreenSock. To be pinned or not to be pinned! or The Taming of the Shrew. See the Pen jOmVWGB by mikeK (@mikeK) on CodePen Happy pinning ... Mikel 2 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