Hi again,
So the stackblitz is running quite smoothly, but in the real project i now have maybe 100 cards flying by, split into 20 years. these cards contain images, video, audio etc. which is way too much for a normal device to handle. Therefore I'm still looking into some way of lazyloading elements or add/destroy dom elements on the fly.
I tried to use React Transition Group, as you can see in Years.js, to only load all content from a single year at a time, but I'm not sure how to trigger an RTG on a specific time in the timeline. I have the current time and the labels array for the years, but cannot wrap my head around how I can update a state/prop when the timeline progress is in a specific year.
I also have a weird problem when clicking the cards, autoAlpha 0 is set on the other cards and their previous alpha is set in a state. however when the card is clicked again, and the other cards appear on the timeline again, they get their old opacity set as intended but visibility is set to inherit, even on the cards that weren't visible before a card was clicked and should be given a hidden visibility along with opacity 0, which results in being able to click on cards that have yet to be available later in the timeline. This is where the centered card can be clicked even though it is not visible after another card is opened and closed again.