maths Posted February 20 Share Posted February 20 Hi, I'm trying to do a scrub/parallax effect using a percentage offset so that the height of the image can be dynamic/not set/auto. I'm applying a negative offset by 20% so that the image have some space so scrub. But how do i apply it "correct", so that the image not get out of its bounds, eg only overflowing 20% bottom and top and keep scrubbing on that area? See the Pen MWxRjxb by frilansmagi (@frilansmagi) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted February 20 Solution Share Posted February 20 I would set a scale on the image (maybe calculate how much you need the scale to be based ont the window.hight and the image height). Also set the image to object fit cover and add a clamp to the ScrollTrigger, so that it always starts from a point even if it already should be playing. Check out for an explanation. I've modified your pen a bit, to visually see where the image is and the red border shows where it's clipping it off. Hope it helps and happy tweening! See the Pen gOEyLLO by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now