Ayrds Posted February 1, 2022 Share Posted February 1, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted February 1, 2022 Share Posted February 1, 2022 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? Link to comment Share on other sites More sharing options...
Ayrds Posted February 1, 2022 Author Share Posted February 1, 2022 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 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted February 1, 2022 Solution Share Posted February 1, 2022 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 1 1 Link to comment Share on other sites More sharing options...
Ayrds Posted February 1, 2022 Author Share Posted February 1, 2022 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! 1 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