Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

2 Newbie

About ravnravn

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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 c
  2. 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 arra
  3. 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!
  4. 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.
  5. 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
  6. 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 comp