Solution Abdul136 Posted April 8, 2022 Solution Share Posted April 8, 2022 Hi, I have added GSAP scrollTrigger pin text with image at a time. The final works perfectly. But I wanted to show 3 text box(left pin text--1,2,3,4,5 boxes) first time and when scroll box one fade out/hide and then another box 4 is added, on second scroll another box 2 is hide and then box 5 is added on the list and so on... I have tried it on codepen but not working properly. Thank you! See the Pen eYyrRMX by bylscwzr (@bylscwzr) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted April 8, 2022 Share Posted April 8, 2022 Welcome to the forums @Abdul136 I read your post many times and I'm totally lost, sorry. I just don't understand what you're asking. 🤷♂️ Please keep in mind that these forums are meant for GSAP-specific questions, not general logic troubleshooting or "here are my list of requirements, please make my project work for me" requests. Please see the forum guidelines. 2 1 Link to comment Share on other sites More sharing options...
Abdul136 Posted April 8, 2022 Author Share Posted April 8, 2022 Hi @OSUblakeOSUblake Sorry for my bad language. Basically in the left side, you can see there are 5 text boxes. Which is sliding corresponding to the right side image. I want to show that text boxes three at a times(currently one images and one text sliding at a time) and highlighted current one. Look at the video what I mean. Let me know if I am able to understand my query. video url : https://www.veed.io/view/bdfd2d52-c587-45ea-8aba-22ad8372e423 Thank you Link to comment Share on other sites More sharing options...
OSUblake Posted April 8, 2022 Share Posted April 8, 2022 Where's the video? 1 Link to comment Share on other sites More sharing options...
Abdul136 Posted April 8, 2022 Author Share Posted April 8, 2022 31 minutes ago, OSUblake said: Where's the video? Here is the video url: https://www.veed.io/view/bdfd2d52-c587-45ea-8aba-22ad8372e423 let me know you can see it. Thank you! Link to comment Share on other sites More sharing options...
Abdul136 Posted April 8, 2022 Author Share Posted April 8, 2022 @OSUblakeOSUblake I believe, you are able to see the video that I have attached. Thank you! Link to comment Share on other sites More sharing options...
OSUblake Posted April 8, 2022 Share Posted April 8, 2022 Yes, thank you. It makes sense now. 1 Link to comment Share on other sites More sharing options...
Abdul136 Posted April 9, 2022 Author Share Posted April 9, 2022 @OSUblakeOSUblake Hi, is there any idea, how can I achieve that? Link to comment Share on other sites More sharing options...
OSUblake Posted April 9, 2022 Share Posted April 9, 2022 I will look at it tonight. 1 Link to comment Share on other sites More sharing options...
Abdul136 Posted April 9, 2022 Author Share Posted April 9, 2022 On 4/9/2022 at 3:59 AM, OSUblake said: Where's the video? Sure, Thank you! Link to comment Share on other sites More sharing options...
OSUblake Posted April 10, 2022 Share Posted April 10, 2022 This might be one approach. I'm just moving the container instead of each individual text block. See the Pen VwydpXz by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Abdul136 Posted April 10, 2022 Author Share Posted April 10, 2022 @OSUblake Yes something like, what else I need if I wanted to animate circle background in image or color div? Link to comment Share on other sites More sharing options...
OSUblake Posted April 10, 2022 Share Posted April 10, 2022 I'm not sure what you mean. If the circle is a DOM element, you can select it inside the loop and add its animation to the timeline. Link to comment Share on other sites More sharing options...
Abdul136 Posted April 10, 2022 Author Share Posted April 10, 2022 @OSUblake Ok, will try to add that too myself. what else If I need to add animtion to the text sliding effect, currently its straightforward without animation. Thank you! Link to comment Share on other sites More sharing options...
OSUblake Posted April 10, 2022 Share Posted April 10, 2022 Just give it a shot. I'm sure you can modify the demo I did to do exactly what you want. If you need a long the way, just post a minimal demo, and we can nudge in the right direction, but we aren't going to do all the work for you. Link to comment Share on other sites More sharing options...
Abdul136 Posted April 10, 2022 Author Share Posted April 10, 2022 @OSUblake you save my day. Lot of thanks. Link to comment Share on other sites More sharing options...
Abdul136 Posted April 10, 2022 Author Share Posted April 10, 2022 @OSUblake I think there is a problem, when second scroll the color does not change, still showing red bg color, can you take a look into that? Link to comment Share on other sites More sharing options...
Abdul136 Posted April 10, 2022 Author Share Posted April 10, 2022 @OSUblake I think orange bg color not showing which is last Link to comment Share on other sites More sharing options...
Cassie Posted April 10, 2022 Share Posted April 10, 2022 Hi @Abdul136 - these forums are for GSAP specific bugs and questions. We're very happy to answer questions that consolidate or deepen someone's understanding of GSAP, but we don't have the capacity to adjust and fix demos for people until they meet their requirements. 1 Link to comment Share on other sites More sharing options...
Abdul136 Posted April 10, 2022 Author Share Posted April 10, 2022 Hi @Cassie Thanks, could you please take a look on that, there the last orange bg color does not update? Link to comment Share on other sites More sharing options...
Abdul136 Posted April 10, 2022 Author Share Posted April 10, 2022 I fixed that 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