Need Help with Christmas Tree Growth Animation in React! πŸŽ„

Hi everyone! I’m working on a React project and could use some guidance. The design involves a Christmas tree that starts off small and gradually grows as the user receives "appreciations" or points. For each appreciation, an envelope icon attaches to the tree as if it’s a decoration. I've attached an image for reference. Any advice on how I can implement the tree growth animation and dynamically add envelope icons to it? Would love any tips or resources on achieving this effect in React!
No description
1 Reply
Chooβ™šπ•‚π•šπ•Ÿπ•˜
The tree could just be an SVG. Animating the size change of that is simple. The challenge is with the envelopes. Ideally, they should not be part of the same image as the tree, because the envelopes should not increase in size. One detail that I'm not sure if you thought about is how tree growth affects envelope placement. Do the envelopes move further apart? That is what would naturally happen if they were affixed to specific points on a tree that grew. Simulating that part probably will require some math in addition to keeping a record of the location of every envelope.
Want results from more Discord servers?
Add your server