omi Posted November 2, 2023 Share Posted November 2, 2023 I'm trying to highlight the navigation corresponding to the card when the card is half of the screen on scroll. Does anyone have a suggestion to make this effect See the Pen mdvrmOY by omi-bhatia (@omi-bhatia) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted November 2, 2023 Share Posted November 2, 2023 Hi, Maybe something like this: let currentLinkIndex = 0; const links = gsap.utils.toArray(".panel__options span"); const timePerLink = tl.duration() / links.length; links.forEach((link, i) => { tl.call(() => { links[currentLinkIndex].classList.remove("active"); link.classList.add("active"); currentLinkIndex = i; }, null, i * timePerLink) }); Here is a fork of your demo: See the Pen OJdRjxa by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
omi Posted November 3, 2023 Author Share Posted November 3, 2023 14 hours ago, Rodrigo said: Hi, Maybe something like this: let currentLinkIndex = 0; const links = gsap.utils.toArray(".panel__options span"); const timePerLink = tl.duration() / links.length; links.forEach((link, i) => { tl.call(() => { links[currentLinkIndex].classList.remove("active"); link.classList.add("active"); currentLinkIndex = i; }, null, i * timePerLink) }); Here is a fork of your demo: @Rodrigo thanks for responding i tried but it's not working i want to highlight the menu when card at half of the screen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Rodrigo Posted November 3, 2023 Share Posted November 3, 2023 Hi, Yeah your demo is a bit convoluted since everything is hard coded. Right now I'm on my phone so I can't really tinker with the code but in your original demo us the position parameter to add your set instances halfway through the card animation so they overlap. Finally keep in mind that your animations use the default power1.out easing function so timing the exact middle of the animation is not as trivial as using half it's duration, so you'll have to do some trial and error to get it precisely right. Check the docs and examples of the position parameter in order to grasp how it works, is not really that complicated. Happy Tweening! Link to comment Share on other sites More sharing options...
omi Posted November 6, 2023 Author Share Posted November 6, 2023 On 11/3/2023 at 5:30 PM, Rodrigo said: Hi, Yeah your demo is a bit convoluted since everything is hard coded. Right now I'm on my phone so I can't really tinker with the code but in your original demo us the position parameter to add your set instances halfway through the card animation so they overlap. Finally keep in mind that your animations use the default power1.out easing function so timing the exact middle of the animation is not as trivial as using half it's duration, so you'll have to do some trial and error to get it precisely right. Check the docs and examples of the position parameter in order to grasp how it works, is not really that complicated. Happy Tweening! @Rodrigo can you help me to fix this issue Link to comment Share on other sites More sharing options...
Cassie Posted November 6, 2023 Share Posted November 6, 2023 Hey there I simplified this down a bit so that the calls changing the links are placed individually on the timeline. Probably easier to comprehend this way? See the Pen ZEwLWLO?editors=0011 by GreenSock (@GreenSock) on CodePen If you need to change the position of them at all - as Rodrigo suggested - take a look at the position parameter. Link to comment Share on other sites More sharing options...
omi Posted November 6, 2023 Author Share Posted November 6, 2023 5 minutes ago, Cassie said: Hey there I simplified this down a bit so that the calls changing the links are placed individually on the timeline. Probably easier to comprehend this way? If you need to change the position of them at all - as Rodrigo suggested - take a look at the position parameter. @Cassie Thanks for quick response i checked but still menu are highlighted when the card animation is completed is there any way to hightlight the menu when card position at half of the screen? Link to comment Share on other sites More sharing options...
Cassie Posted November 6, 2023 Share Posted November 6, 2023 As both Rodrigo and I mentioned - the position parameter. I've added in a commented out example in the codepen and we've linked multiple times to the position parameter docs. It's easier than you think - take a look and give it a go. Link to comment Share on other sites More sharing options...
omi Posted November 6, 2023 Author Share Posted November 6, 2023 2 hours ago, Cassie said: As both Rodrigo and I mentioned - the position parameter. I've added in a commented out example in the codepen and we've linked multiple times to the position parameter docs. It's easier than you think - take a look and give it a go. @Cassie@Rodrigo I made some changes to the code it's working but only one minor issue is pending on scroll everything is working fine but when I click on the last menu item the last card does not slide when I place the highlighted block code above as highlighted in the screenshot tl.from(".panel__card--four", { y: () => window.innerHeight }); https://prnt.sc/LnIZAQg1xCqZ codepen: Link to comment Share on other sites More sharing options...
Rodrigo Posted November 6, 2023 Share Posted November 6, 2023 Hi, This is isn't the simplest thing to achieve, right now everything in your demo is hardcoded and your gotSeek method is faulty in the fact that you are doing two things that are completely redundant. You have a timeline with a ScrollTrigger instance in it. Adding ScrollTrigger with a scrub configuration on it to a GSAP instance (Tween or Timeline), means that ScrollTrigger will control the progress of that particular instance based on the scroll position considering the start and end points you feed to it. So right now you have this: function gotSeek(id) { gsap.to(window, { duration: 0.3, scrollTo: { y: tl.scrollTrigger.labelToScroll(id) + 10 }, ease: Power2.easeOut }); tl.tweenTo(id, { duration: 0.3, onComplete: function () {}, ease: Power2.easeOut }); } That basically has two GSAP instances, one moves the scroll position using the ScrollTo Plugin to a specific point and the other tells the timeline (that's already controlled by ScrollTrigger, hence controlled by the scroll position, hence controlled by the previous instance that uses the ScrollTo Plugin) to go to a specific label. So you have ScrollTrigger trying to update the progress of your timeline using the scroll position and then, almost immediately, you create another instance that moves the same timeline's playhead, to a specific position. On top of that you have four targets on your links (b-c-d-e) and only three labels on your timeline (b-c-d), so for the final link, ScrollTrigger can't find the exact position of that label (e). This is the closest I can get to what it seems you're after: See the Pen OJdRjxa by GreenSock (@GreenSock) on CodePen Unfortunately we don't have the time resources to create complex custom solutions for our users in these free forums. You can contact us for paid consulting or post in the Jobs & Freelance forums to get help there. Hopefully this helps. Good luck with your project and Happy Tweening! 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