Elastic header

[lucky111]

Is it a way to build this elastic header effect with gsap?

 

When I try this in my iphone it is a litle bit flicking.

My be we can geting it to work better with gsap

See the Pen NqrYQL by olach (@olach) on CodePen

[Rodrigo]

Hi,

 

I would start by trying the Observer Plugin and use the onDrag callback with the current scroll position. Or perhaps Draggable with the Inertia Plugin and a proxy that is triggered by the body element or a main container.

 

The real challenge here is the overshoot behaviour, doing this when the window scroll is at the top is super easy, but when is not... you'd have to check the Inertia Plugin in order to see the final destination of the throw instance and based on that and the screen size calculate the final scale value of the image container. Another option would be to check Inertia Plugin's velocity tracker in order to see if that helps with the overshoot behaviour-

 

As I mentioned this is not a simple task but with enough custom logic it can certainly be achieved. Unfortunately is a bit beyond the help we can provide in these free forums, you can contact us for paid consulting services or post in the Jobs & Freelancing forums in order to get help there.

 

Happy Tweening!