Lins Posted November 19, 2023 Share Posted November 19, 2023 Hi GSAP team, I often use GSAP for a long time but just "copy pasting" the codes.... And now, I really want to expert it (going to buy your license in near time!) I have a couple question, actually a lot... Hope you can bear with me 1. Is there any wrong / bad syntax on my approach? Would you "correct" or tell me what's bad/wrong in my GSAP codes. 2. How to make the .draw-line class slower to bottom when I scroll it? I mean the duration. I do research and implement it, but it didn't work (I already take it out) 3. I want to add ".active" on ".timeline-li" when .draw-line start triggering. I already did it, but the "active" class removed automatically when it's outside the trigger area 4. I also want to change the image on the left, when the second .draw-line triggered. (We can talk later once these three are resolved) I'm so sorry if my question is too da*n much, hope any of you can help me out. Thank you, so so much! See the Pen KKJQXYm by aditlin (@aditlin) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted November 20, 2023 Share Posted November 20, 2023 It's great to hear that you're jumping in to learn the tools more, @Lins Usually it's best to just tackle one thing at a time instead of cramming 4 questions into one post which can be a bit overwhelming. I'm not entirely sure what you're trying to do, so I can't assess what is "good" or "bad", but maybe this is a good starting point?: See the Pen yLZvKpj?editors=0010 by GreenSock (@GreenSock) on CodePen This looked very odd to me: "top bottom+=-25%" Did you mean?: "top bottom-=25%" Which would be more simply written as: "top 75%" Anyway, I hope that gets you going in a good direction. 1 Link to comment Share on other sites More sharing options...
Lins Posted November 20, 2023 Author Share Posted November 20, 2023 3 hours ago, GreenSock said: It's great to hear that you're jumping in to learn the tools more, @Lins Usually it's best to just tackle one thing at a time instead of cramming 4 questions into one post which can be a bit overwhelming. I'm not entirely sure what you're trying to do, so I can't assess what is "good" or "bad", but maybe this is a good starting point?: This looked very odd to me: "top bottom+=-25%" Did you mean?: Which would be more simply written as: "top 75%" Anyway, I hope that gets you going in a good direction. @GreenSock Hi there! Aight! thank you, next time I will ask step by step to make it easier. Thanks to fix my codes! Yes, you are right! What I mean is "top bottom-=25%" And yes, that's exactly what I want! But I don't want to remove "active" class *except* User scroll back to top. I tweaks the codes from your last fix, but when I scroll to top, all active class on List removed instantly. What I want is each Item removed by scroll when the User scroll back to top Sorry if what I made confused you, I'll try to tweaks the codes a bit & explain here: In this Strategy Section, user can scroll to bottom and the timeline move down like now (solved), however later when the User scroll down, the ".timeline-li.active" will trigger the image ".strategy-image .image" on the left to change / stack to another image. Is it clearer now? Just give me the clue, so I can learn from it and give back to you when its done! **I already changes the codes Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted November 20, 2023 Solution Share Posted November 20, 2023 Hi, Maybe something like this: See the Pen vYbdoLg by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 3 Link to comment Share on other sites More sharing options...
Lins Posted November 20, 2023 Author Share Posted November 20, 2023 34 minutes ago, Rodrigo said: Hi, Maybe something like this: Hopefully this helps. Happy Tweening! Hi Rodrigo, Yes this is exactly what I want! I will add more function from here, thankies! 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