TerraHQ Posted December 1, 2023 Share Posted December 1, 2023 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 Link to comment Share on other sites More sharing options...
Solution TerraHQ Posted December 1, 2023 Author Solution Share Posted December 1, 2023 See the Pen abXRKvR?editors=1010 by andresclua (@andresclua) on CodePen Fix it. 1 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted December 1, 2023 Share Posted December 1, 2023 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! 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