Starting to get into Webflow and I’m trying to create this animation where I have a background image and as I start scrolling, I want it to freeze midway through the image (ie. half of the image is taking up half of the viewport height) and will stay frozen in that state even if I continue scrolling until I reach a certain point (ie. scrolling still is enabled even though the image is frozen halfway and after number of pixels are scrolled the image will finish moving until out of view).
I hope this makes sense, and thank you in advance for everyone’s time and help.
I’m thinking that position sticky is what you need. Basically you can have a div that’s for example 300vh height and inside that div you can have an image with position sticky applied. That way the image can stick (freeze) while you are scrolling down.
Thank you for the prompt response. So I tried separating the image into two sections so that the bottom half image is sticky and stops moving once it hits the top of the page, but the interaction is very strange and it vibrates when I scroll and you can visibly see that the overall image has been cut into two sections. Basically it’s not a smooth transition (I’m using a MacBook and Safari if this helps with the reason why).
My question is, is it possible to create this same effect without having to split the image into two halves. I know it’s possible to offset where the image begins to stick, but this only works for the top of the image and not for the middle of the image (ie. negative sticky position doesn’t seem to work).
It seems you have been lied to. I apologize haha I retried the negative sticky position and it works now. But the vibration still exists when I’m scrolling (image seems to move up and down slightly when I scroll down or up).
I looked into overflow but I’m not sure if this is this answer.
