how to active the navigation when card in half of the screen

[omi]

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

[Rodrigo]

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!

[omi]

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!

 

[Rodrigo]

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!

[omi]

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

[Cassie]

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.

[omi]

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?

[Cassie]

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.

 

[omi]

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: 

[Rodrigo]

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!