scrollTrigger with activeItem

[Alvys]

hi to all greenSock users!

i'm working on a project and i'm trying to figure out how to add a class to the activeItem(which for me is the item in foreground, with: z-index:100). the reason i need it is to apply a click listener to this item in order to flip the card and at the same time the other cards shouldn't flip. i was reading here around but unfortunately couldn't find anything.

 

thanks for your help!!

See the Pen rNqLEgE by JulianCastravet (@JulianCastravet) on CodePen

[Rodrigo]

Hi @Alvys and welcome to the GreenSock forums!

 

First, thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

I fiddled around with your codepen for a bit and found an issue with it that prevents having a reliable way to know the current active item soto speak. If you add numbers to the cards and scroll up and down for a while you'll find yourself in this situation:

https://i.imgur.com/mOD1A2k.mp4

 

As you can see there is a jump in the cards that makes it unpredictable to check the current item because it doesn't go in hand with the seamless loop current progress. This is due to the overlap created in the seamless loop function. I played around with that particular value without any success. Same thing while adding and removing items to the list.

 

Unfortunately I'm not extremely familiar with that particular function and we don't have the time resources to provide general consulting and solve complex logic issues in these free forums. You can contact us for paid consulting or you can post in the Jobs & Freelance forums in order to get help there.

 

Sorry I can't be of more assistance 😞. Good luck with your project!

Happy Tweening!

[geedix]

I'm not much of a coder but I can usually find a way. Here's a fork that loops through the cards onUpdate, and adds the class if a card is over a certain opacity:

See the Pen gOBwWaq?editors=1111 by geedix (@geedix) on CodePen

Maybe poor for performance to do it this way, but it works. 

 

[Alvys]

first of all thank you for your rapid answer. @geedix you're definitely  a life-saver! Apparently it was an easy task now that i see the changes, but that's the difference between a pro and a beginner :D. Thank you very much guys! Happy Tweening everyone!

[GreenSock]

That certainly works and I applaud the problem solving 🙌, but I personally would not take that approach because I obsess about performance and it seems a tad heavy-handed in that regard. Maybe it makes no real-world noticeable difference, though. I just tend to be a total nerd when it comes to optimizing things. I'd want to dig into the logic and find a way to tap into the timeline at the appropriate spots to have it notify me of when the current index changes. But yeah, that'd take more work. It's not something I have the bandwidth to do for free here, but you're welcome to reach out if you'd like to engage us on a paid consulting basis. Otherwise, @geedix's solution is probably an excellent option for you. 👍

[Carl]

i was playing around with this last night and was kind of embarrassed with what I came up with.

 

 

First, this highlight function adds or removes the active class

function highlight(card, isActive) {
  if (isActive){
          card.classList.add("isActive");
        }
        else{
          card.classList.remove("isActive");
        }
}

Then I use this "wall of callbacks" to toggle the active class as the playhead passes through "the active zone".
 

rawSequence.fromTo(item, { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, zIndex: 100, duration: 0.5, yoyo: true, repeat: 1, ease: "power1.in", immediateRender: false, id: "currentItem" }, time)
            .fromTo(item, { xPercent: 400 }, { xPercent: -400, duration: 1, ease: "none", immediateRender: false }, time)
      //start wall of callbacks
      .call(highlight, [item, false], time+0.44)
      .call(highlight, [item, true], time+0.45)
      // this is the active zone
      .call(highlight, [item, true], time+0.55)
      .call(highlight, [item, false], time+0.56)

 

each card animation is one second long so at exactly a time of 0.5 is when it is full scale and opacity.

with the approach above I have one second of time from 0.45 to 0.55 where the active class is applied via the highlight callback.

On either side of that range I have callbacks that remove the active class.

 

See the Pen wvYzeYr?editors=0110 by snorkltv (@snorkltv) on CodePen

 

I initially tried to just set the active class at 0.5 exactly. It works fine, but with the easing it seems like you're kind of waiting for the animation to finish before it gets set. feel free to activate this chunk in the demo. 

 

      .call(highlight, [item, false], time+0.49)
      .call(highlight, [item, true], time+0.50)
      .call(highlight, [item, false], time+0.51) 

 

again, I'm not super confident this is the most elegant solution but figured it might help you think of ways it could work. 

 

I imagine if you knew the direction the animation was being scrubbed you could determine whether or not the the active class should be applied or removed and avoid my brute force wall of callbacks.

 

while I'm here I'd like to applaud at @geedix for supplying an answer that certainly works quite well.