lucy99 Posted May 23 Share Posted May 23 Hello, First of all, shout out to team GSAP! I'm starting to like and play with GSAP. I would like to replicate a scene, imagine walking down the hallway and the "boxes" are the paintings attached in the wall. So what I did, a pinned section together with the boxes element are set their opacity as 0 and translateZ in negative value. Is there a way I can modify a box's translateZ without limit? It will only stop modifying the translateZ and opacity value when I'm out of the section. Here's a loom video, cannot totally replicate it from the Codepen: https://www.loom.com/share/478a15a500224c058cacd868a97caf27 Thank you in advance, GSAP. See the Pen bGyeKRq by pringkr (@pringkr) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted May 23 Share Posted May 23 Hi @lucy99 and welcome to the GSAP Forums! The main issue here is that you were giving the body tag a display flex property and a fixed height, so there was no scrolling available. As a general approach I try to avoid doing that and gibing the body tag too many styles. Here is a fork of your demo: See the Pen KKLMGMv by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
lucy99 Posted May 23 Author Share Posted May 23 Hello @Rodrigo! How are you? Hope you are good. Thank you for fixing my demo. Is there a way I could observe the scrolling event inside of a pinned section? In that way, I could create variables to increase the opacity and translateZ of a box according to scroll value. Thank you again, Best regards, Lucy Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted May 23 Solution Share Posted May 23 Hi, One of the containers that is not the width and height of the viewport has overflow hidden so that creates a crop that looks odd. Also you have to add perspective to a container in order to create a 3D effect: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective https://3dtransforms.desandro.com/perspective I updated the codepen: See the Pen KKLMGMv by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
lucy99 Posted May 23 Author Share Posted May 23 Thanks a lot @Rodrigo !! Have a nice day ahead! 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted May 23 Share Posted May 23 11 minutes ago, lucy99 said: Thanks a lot @Rodrigo !! Have a nice day ahead! You're welcome! Nice profile image, by the way!! 🐶 1 Link to comment Share on other sites More sharing options...
.thumb.jpg.13fedf25f546abcc6d54d78efe932665.jpg)
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