Moving Background Image Vertically on Scroll and hide after a section

[Araf Hossain]

As you can see in my codepen code there is a image and I want to fixed its position center in the section. When scrolling down it will follow the scroll.

 

When the following section comes up there will be a parallax effect. That means image will stick at the bottom of that section and following sections going up over the image. 

Here is a simple example. Like the form on that website, I want my image but in the center of viewport. 

 

If you don't understand please let me know.  

See the Pen Yzwpevj by arafnoob (@arafnoob) on CodePen.

[ZachSaucier]

Hey Araf. There's a demo in the ScrollTrigger docs that does this sort of thing. What you're wanting is essentially a simplified version of this demo:

See the Pen YzyqVNe by GreenSock (@GreenSock) on CodePen.

 

This is exactly what position: sticky was made for.

[Araf Hossain]

4 hours ago, ZachSaucier said:

Hey Araf. There's a demo in the ScrollTrigger docs that does this sort of thing. What you're wanting is essentially a simplified version of this demo:

 

 

 

This is exactly what position: sticky was made for.

I really appreciate your answer. But it is very complicated for me  Is there any simple way to do? 

 

Would you please give an example with my codepen code? Thank you  

 

 

[ZachSaucier]

Research position: sticky. If you need more complicated animations then get ScrollTrigger involved.

[Araf Hossain]

I have tried lots of things after that I come up with GSAP. In gsap it is pretty much easy I know. But for the newbie I don't know how to do it. 

[ZachSaucier]

I cut out some of the code from the pen above.

See the Pen jOqBaBa?editors=0100 by GreenSock (@GreenSock) on CodePen.

 

If you need additional help please tell us what the specific issue is.

[Araf Hossain]

I have done as you have done. But it not working. Because my every section "position: absolute" for this reason it not working might be. Checkout my pin then maybe you will get some idea. 

 

See the Pen Yzwpevj by arafnoob (@arafnoob) on CodePen.

[ZachSaucier]

Correct, you'll have to come up with a different way of positioning your items, at least the ones related to this effect. Unfortunately we don't have the capacity to build out the effect for you. Let us know if you have specific questions and we'll do our best to help