React + GSAP : SVG + Animation Created From GIF
Budget: $10 – $30 USD
I am seeking to develop a React SVG Component that closely resembles the provided GIF. The implementation will involve utilizing React and GSAP for handling animations.
Respond with examples of how you have utilized react and gsap
To enhance configurability, I intend to expose the following properties at the top level of the component:
1. Rotation Percentage: This value determines the overall percentage by which the entire component rotates during its movement.
2. Puzzle Slide-out Distance: This property defines how far each puzzle piece moves away from the centerpoint during its bounce. The top piece slide out distance should be separately configurable from the bottom piece slide out distance.
3. Bouncing Angle: The angle at which the puzzle pieces bounce will be modifiable, allowing options like 33% or 45%.
4. Primary, Secondary, and Bouncing Ball Colors
For code maintenance and readability, please ensure that the codebase remains well-organized and clean. Whenever possible, create subcomponents to modularize the structure. Specifically:
- Main component: BouncingAndRotatingPuzzlePiece
- Subcomponent options: PuzzlePieceComponent, BouncingBall
Additional Requirements:
1. Strive to create a reusable puzzle piece component. Utilize transformations and rotations for positioning. If necessary for layering, dividing the puzzle piece into multiple objects is acceptable.
2. The width of the puzzle piece should match its height.
3. Aim to generate SVG elements that are concise with minimal points. Prioritize using shapes like rectangles, circles, and simplified paths.
4. Two timeline options are expected: one where the puzzle piece only bounces upon ball impact with the center circle, and another where bouncing starts before the impact, as illustrated in the graphic.
5. Please avoid employing CSS animations; rely exclusively on GSAP for the animation logic.
Variations:
1. In the variation, I would like the bottom left and top right puzzle pieces to be the ones responsible for the bouncing animation, rather than the top left and bottom right sections as depicted in the GIF.
Respond with examples of how you have utilized react and gsap
To enhance configurability, I intend to expose the following properties at the top level of the component:
1. Rotation Percentage: This value determines the overall percentage by which the entire component rotates during its movement.
2. Puzzle Slide-out Distance: This property defines how far each puzzle piece moves away from the centerpoint during its bounce. The top piece slide out distance should be separately configurable from the bottom piece slide out distance.
3. Bouncing Angle: The angle at which the puzzle pieces bounce will be modifiable, allowing options like 33% or 45%.
4. Primary, Secondary, and Bouncing Ball Colors
For code maintenance and readability, please ensure that the codebase remains well-organized and clean. Whenever possible, create subcomponents to modularize the structure. Specifically:
- Main component: BouncingAndRotatingPuzzlePiece
- Subcomponent options: PuzzlePieceComponent, BouncingBall
Additional Requirements:
1. Strive to create a reusable puzzle piece component. Utilize transformations and rotations for positioning. If necessary for layering, dividing the puzzle piece into multiple objects is acceptable.
2. The width of the puzzle piece should match its height.
3. Aim to generate SVG elements that are concise with minimal points. Prioritize using shapes like rectangles, circles, and simplified paths.
4. Two timeline options are expected: one where the puzzle piece only bounces upon ball impact with the center circle, and another where bouncing starts before the impact, as illustrated in the graphic.
5. Please avoid employing CSS animations; rely exclusively on GSAP for the animation logic.
Variations:
1. In the variation, I would like the bottom left and top right puzzle pieces to be the ones responsible for the bouncing animation, rather than the top left and bottom right sections as depicted in the GIF.