Collapse Expand Issue

[TerraHQ]

Hi there!

I want to implement an animation where, upon scrolling down, the current card collapses, and the next (index + 1) card expands. Correspondingly, when scrolling up, I aim for the current card to collapse, and the previous (index - 1) card to expand.
Up to this point, I have applied an approach that achieves this behavior when scrolling down, collapsing the current card and expanding the next one, and vice versa when scrolling up. This dynamic works correctly upon entering and exiting the global scroll trigger.
The issue arises when, within the global trigger, I interact with the scroll. For example:

Example 1:
Scrolling down, I expand card[1]. At this point, I want to open card[0] when scrolling up.

Example 2:
I scroll down, expanding card[1]. Then, I continue scrolling, open card[2], and close card[1]. Now, when scrolling up, I close card[2] and open card[1], repeating the process. I continue scrolling up, and now card[1] closes, and card[0] opens. At this point, when scrolling down, card[0] should close, and card[1] should open. Instead, what happens is that card[0] remains open, and card[2] also opens, while card[1] remains closed.

My goal is for, regardless of the position, the next (index + 1) card to open when scrolling down and the previous (index - 1) card to open when scrolling up.

Thanks in advance!

See the Pen oNmaqPe by Julieta-Fredes (@Julieta-Fredes) on CodePen

[TerraHQ]

See the Pen abXRKvR?editors=1010 by andresclua (@andresclua) on CodePen

Fix it.

[Rodrigo]

Hi @TerraHQ,

 

Is great to hear that you were able to fix the issue you were having! 🥳

 

Finally thanks for sharing your solution with the community, I'm sure other users will benefit from your generosity 💚

 

Happy Tweening!