ravnravn

Hi @Rodrigo Thanks for your answer! I tried to wrap year1996 in a Transition component, and it is appearing after scrolling to a specific time in the timeline. But I'm not sure how I'm supposed to remove it again with addEndListener. I also need to find another way to calculate the height of the document that should match the duration of the timeline, as this is unknown when the elements are not added to the dom all at once. or maybe find another approach, that does not require the document to be as heigh as the timeline duration. for now it's just set in componentDidMount in index.js with an offset of 10000 to make room for 1996. Whether the RTG should be on an entire year or every element is not at all decided yet. whatever works

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.

I replaced top and left with x and y again and it did indeed solve the jumpy behaviour in Safari. Don't know how i missed that in the first place. Thanks again, very much appreciated!

Argh I just realized i have some issues in Safari. When scrolling through the cards they are jumping up and down a bit. I tried to animate x and y properties instead of top and left, but it did not make any difference.

Hi @Rodrigo, Thanks a lot for your response! I Implemented your suggestions in the code. It makes so much more sense. Yes, Redux might be a good idea. Maybe it will be implemented later. I still feel it could maybe be beneficial to use React transition Group for e.g. Years component, so each year with all it's content will be rendered when needed. What is the preferred way to apply styles to components and tweens? Is it to TweenLite.set all styles on the element refs or inline style/adding a style const or using css/sass files? I'll also be using breakpoints on styles and animations, but I'm not sure whats the best practice on this either. Thanks again, your response is gold

Hi! I'm fairly new to React and firsttimer with Greensock aminations. I'm developing a timeline that is animated on the z-axis when the user scrolls through the page. However I have some issues with getting React Transition Group to play well with nested timelines, and animating out of the current progress in the timeline and then animate back on track. I have the following issues: How would I use React Transition Group in components to add/remove elements when scrolled by the element in the timeline. As you can see in Box1 I tried to wrap the component in the Transition component, but then I cannot add a nested timeline to the main timeline in index.js, that is displayed as box2 with animate on scroll. When clicking a box it opens with an animation. how would I make it animate back to small again, when clicking/scrolling. Right now it just jumps back to where it were on the timeline, before it was clicked (try to click box2). I made a simple project. The real project is much larger, and I'm therefore really concerned about optimizing performance and reuse components etc. https://stackblitz.com/edit/react-jap66w?embed=1&file=index.js For reference, this site is doing some of what I'm trying to achieve visually: https://2018.craftedbygc.com/ Thanks in advance