Jump to content
Search Community

Pinned element animation ends too soon on higher screen viewport

Milan_K test
Moderator Tag

Recommended Posts

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

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!

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...