Backround image cuts of while moving up

[Vicky27 3 Likes (Newbie)]

Hi,

I am trying to reproduce a banner just for practicing and improving my gsap skills by making the background image  to scale out and move up at the same time. The starting point is the midlle of the picture above the head of the climber.How could I make it move slowly up(starting from a specific point in my case) and at the same time scaling out very slowly.I have tried to achive it with the code I have in codeopen but at one point it is seem that the image cutts off from below?

Thank you in advance!

See the Pen OJoyBbe by vicutza_27 (@vicutza_27) on CodePen

[dev-kp 15 Likes (Newbie)]

Do you mean something like this:

See the Pen VwGvgwx by dev-pk (@dev-pk) on CodePen

 

Or did I misunderstand what you are trying to achieve?

 

[Vicky27 3 Likes (Newbie)]

Hi,

Thank you for your reply,

However, I need to have it zooming in (from just above his head) which means the image is scaled out as it is coming up and then it is moving up and in the right side away (as per image with frames above)

How to make zooming from a specific point as I have tried to set the x and y position but then the image is not scaling but changing the size of it?

 

[flysi3000 62 Likes (Contributor)]

I'm not sure if I fully understand what you're going for, but it sounds like you need to change the origin point of where the image is scaling from, I.e. the transform-origin of the image. By default, scaling happens from the center of the image, or half of the width and half of the height:

transform-origin: '50% 50%' or transform-origin: 'center'.

 

You can change those numbers so that the scales from any position - it could be the top left, bottom right, or some arbitrary point in the image:

gsap.set(img, {transform-origin: '0 0'})
gsap.set(img, {transform-origin: '100% 100%'})
gsap.set(img, {transform-origin: '63% 32%'})

// note that you can also set your transform-origin into your .from() tween
gsap.from(img, {duration: 29, scale: 1.2, ease: "power1.out", transform-origin: '63% 12%'}, 'img')

You just have to figure out where you want it to start scaling from and uses those percentage values. I often eyeball it and use approximate values, but you could use something like Photoshop to figure out the exact percentages.

 

Oh - and you only need to set it once - unless, that is you want to scale the same image again from a different point later. Hope this helps! :)

[sawacrow 4 Likes (Newbie)]

Hi,

If you're not doing it for GSAP practice, there's no need to overengineer it. you can do it with just CSS.
 

See the Pen ExeQyag by sawacrow (@sawacrow) on CodePen