Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Milan_K

Pinned element animation ends too soon on higher screen viewport

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 post
Share on other sites

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 post
Share on other sites

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

 

  • Like 4
Link to post
Share on other sites

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 post
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 post
Share on other sites

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

  • Like 2
Link to post
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.

×