How do I move the background image inside a div vertically using scroll trigger, where the background attachment is fixed based on the scrollbar movement?

[vinayskolkare]

 

<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/popjrluq-the-selector/embed/dyrgXea?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/popjrluq-the-selector/pen/dyrgXea">
  Untitled</a> by vinay kumar (<a href="https://codepen.io/popjrluq-the-selector">@popjrluq-the-selector</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

 

Hi, above is my code i am not able to find any resources on this topic, any help would be really appreciated..

See the Pen dyrgXea?default-tab=html%2Cresult by popjrluq-the-selector (@popjrluq-the-selector) on CodePen

[mvaneijgen]

Take a look at the following demo's. Hope it helps and happy tweening! 

 

See the Pen rNJQPXz by GreenSock (@GreenSock) on CodePen

See the Pen BarmbXq by GreenSock (@GreenSock) on CodePen