thehaes Posted January 19, 2023 Share Posted January 19, 2023 I hope the title didn't confuse you lol I have 2 columns in my setup - left one is sticky/fixed (it needs to stay in place) and the right one is long container with text. Inside left column I have wrapper with dynamic amount of images (so the height of container is dynamic). What I want is left column to be synced with right column scroll position (so basically when default scroll position reaches bottom of the page then bottom of the right column also touches bottom of viewport). That works fine. Next, I loop through each image wrapper (which is 100vh) and make them as triggers to animate img inside each wrapper when they enter/exit viewport. That's the thing I cannot get to work, I imagine it's because the left column is already being manipulated by gsap on a container with position: sticky, so it cannot read the trigger start/end positions correctly. Is there any way to make this work? Maybe some magical option I missed in the docs? I thought about containerAnimation, but it appears it was made with horizontal scroll in mind See the Pen OJwOeqa by thehaes (@thehaes) on CodePen Link to comment Share on other sites More sharing options...
thehaes Posted January 19, 2023 Author Share Posted January 19, 2023 Ok, it's really weird. I noticed it works on codepen, but not on my build 🤔 Need to investigate --EDIT-- Actually, it's not - I'm so confused lol. It seems the start/end positions are being read incorrectly, not sure about it but it looks like it's animating all images using same trigger, and not separate trigger for each image Link to comment Share on other sites More sharing options...
Rodrigo Posted January 19, 2023 Share Posted January 19, 2023 Hi, While you investigate take a look at this codepen: See the Pen NWMZrbj by GreenSock (@GreenSock) on CodePen Hopefully it helps and you find a solution. Let us know if you have more questions. Happy Tweening! Link to comment Share on other sites More sharing options...
thehaes Posted January 19, 2023 Author Share Posted January 19, 2023 Thanks @Rodrigo The part that's in the codepen you shared works in mine too, what I have problem with is the content inside the left column which I want to animate with another ScrollTrigger. For a moment I just thought it works, but it's not - I fell for an illusion Link to comment Share on other sites More sharing options...
thehaes Posted January 21, 2023 Author Share Posted January 21, 2023 Unfortunately, after trying many times I wasn't able to make it work. It still looks like it's animating every image at the same time instead of each image wrapper acting like trigger for children image. Any idea why? I think I looped through each image correctly. When I turn on markers it seems like positioning is wrong because I'm also moving the left container - is there any way or gsap option to take that into account? Link to comment Share on other sites More sharing options...
Rodrigo Posted January 21, 2023 Share Posted January 21, 2023 Hi, Is better to create just one timeline that handles all the translation and rotation and just pin the entire section, or at least is simpler for my thought process TBH. What I did is to pin the entire container. Have a single timeline. Add the right column translation with a specific duration, in this case 2.5 seconds. Why? Because we have 3 images and we want to rotate those images for 0.5 seconds each and translate the images container for 0.5 seconds after each image rotation. The just run a loop for each image rotation and the images wrapper translation. Here is a live example: See the Pen RwBxXpB by GreenSock (@GreenSock) on CodePen Happy Tweening! 1 Link to comment Share on other sites More sharing options...
thehaes Posted January 22, 2023 Author Share Posted January 22, 2023 Thanks for the pen @Rodrigo! This works better for me, I just don't want to pin images themselves while they are rotating so it works more like a parallax scroll. I tried to modify your pen and add y: -(window.innerHeight * i) to image rotation tween to make it fake "scroll", but then it works only for 2nd and 3rd images (the first one is still pinning) Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted January 22, 2023 Solution Share Posted January 22, 2023 Hi, Just remove that part from the loop, add it to the timeline at 0 seconds and make it's duration the same as the right column's fake scroll: mainTl.to(rightColumn, { ease: "none", y: -(rightColumn.scrollHeight - rightColumn.clientHeight), duration: 2.5 }) .to(imagesWrapper, { ease: "none", y: (window.innerHeight - imagesWrapper.clientHeight), duration: 2.5, }, 0); gsap.set(images, { rotation: 10 }); images.forEach((image, i) => { mainTl.to( image, { rotation: -10, ease: "none" }, i ); }); Hopefully this helps. Happy Tweening! 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