Parallax img not working properly

[Shehzad Asif]

Hy There

 

I am on the learning road of gsap and often faces  some problems I could not solve myself. Any how the problem is, parallax images works but their start/ end position is not working properly as in the demo, parallax effect stop working before end mark or after start mark.  If I do the same thing with some content over background image or with other properties like scaling, fading, these effects totally work fine from top to bottom but if I have only background image or only image it will not work x and y axis from top to bottom

As you can see in the demo the image is moving only from the bottom but not from the top. Any help how to do this.

 

Regards,

Shehzad Asif

See the Pen oNLgQeZ?editors=0001 by ShehzadAsif (@ShehzadAsif) on CodePen.

[ZachSaucier]

Hey Shehzad. This is working exactly correctly. The only issue is that you have extra space at the top (between the top of the container and the top of the image) so the image isn't being cut off, thus making the translation hard to perceive. Set background: black; on .img-wrapper to see what I mean. 

 

There are a lot of potential ways to fix this depending on what sort of effect you want.