Keep the Y position that is by default in CSS

[Ayrds]

Hello!
I'm learning to use SAP and I have a problem that I don't know how to solve.

I'm making a gallery of images and I want to make each of the images fade-up; In the css I have by default a position for the even images with the property transform: translate3d, so that the images achieve a staggered effect, as seen in the attached image.

The problem is that if I use gsap.to('.element', {y: 0} it places the images next to each other. How do I keep that position that is in the css and do the fade-up until the same?

I leave attached the codepen.

I hope this has been understood, any advice would be very helpful.

Thanks!

See the Pen ZEaQwdw by ayrds (@ayrds) on CodePen

[OSUblake]

Welcome to the forums @Ayrds

 

I'm a little unsure about what you are asking here. Do you want both images to move 200, or just one of the images?

[Ayrds]

7 hours ago, OSUblake said:

Welcome to the forums @Ayrds

 

I'm a little unsure about what you are asking here. Do you want both images to move 200, or just one of the images?

Thank you OSUBlake.

I want to move both images, but when doing the fade-up, I want the limit to be the Y position, which is by default in the CSS.

Hope it's understandable

[OSUblake]

Gotcha. With GSAP, you can do relative values like this, so "+=200" would add 200 the current y position, and "-=200" would subtract 200 from the current y position. And if you wanted to get the current y position, you can use gsap.getProperty.

 

Is this what you were looking for? I set the opacity in the CSS so you don't see a flash?

 

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

[Ayrds]

7 minutes ago, OSUblake said:

Gotcha. With GSAP, you can do relative values like this, so "+=200" would add 200 the current y position, and "-=200" would subtract 200 from the current y position. And if you wanted to get the current y position, you can use gsap.getProperty.

 

Is this what you were looking for? I set the opacity in the CSS so you don't see a flash?

 

 

 

Yes, that's what I was looking for! Thank you very much and sorry if my English was not very good. Greetings from Argentina!