React/GSAP Animated SVG Circles with Text
Budget: $10 – $30 USD
I'm looking for an experienced React developer who can create a smooth and fluid animation of two circles merging and expanding with text. A sample of the animation desired has been provided in the form of a component.
Please review the sample and requirements carefully and let me know if you can replicate this animation.
Ideal Skills:
- Proficiency in React, TypeScript and JavaScript
- Experience with creating animations in React
- Ability to utilize gsap / experience with gsap
- Clean Code
- Clear Communication, Responsive
Additional Requirements:
- Provide the completed work as a React component
- The component should easily allow for customization of the phases of the animation and their durations
- The component should have parameters that accept 3 text fields. Something like:
{ leftCircleText: string, rightCircleText: string, finalCircleText: string[] }
- The final circle should allow for an array of text that will switch from one to the next with a fade in and out transition. Note: this may be adjusted in the future to be a different transition
- The elements of the animation should be SVG elements, and the component should return a proper complete svg
- This component should be reusable
- There is no background, the focus is on the circles ( transparent background )
- The circles should be able to fit words such as: Business, Technology, and Innovation
- Allow colors to be specified in the parameters of the component. Try to utilize the following colors and create something that is visually appealing, if not you can utilize colors similar to the provided mp4 and I will experiment with the coloring. main: "#621890", dark: "#3e105c", light: "#a662d0",
- The change in color / mask as the circles come together should be included as shown in the animation
- The default durations should reflect the provided mp4 but should be adjustable
- The final circle should grow as shown in the animation
Technology Requirements:
- React
- GSAP
- JavaScript or TypeScript
- SVG
Ask questions for clarification. Can you complete this? How long will it take you? Whats your experience?
Please review the sample and requirements carefully and let me know if you can replicate this animation.
Ideal Skills:
- Proficiency in React, TypeScript and JavaScript
- Experience with creating animations in React
- Ability to utilize gsap / experience with gsap
- Clean Code
- Clear Communication, Responsive
Additional Requirements:
- Provide the completed work as a React component
- The component should easily allow for customization of the phases of the animation and their durations
- The component should have parameters that accept 3 text fields. Something like:
{ leftCircleText: string, rightCircleText: string, finalCircleText: string[] }
- The final circle should allow for an array of text that will switch from one to the next with a fade in and out transition. Note: this may be adjusted in the future to be a different transition
- The elements of the animation should be SVG elements, and the component should return a proper complete svg
- This component should be reusable
- There is no background, the focus is on the circles ( transparent background )
- The circles should be able to fit words such as: Business, Technology, and Innovation
- Allow colors to be specified in the parameters of the component. Try to utilize the following colors and create something that is visually appealing, if not you can utilize colors similar to the provided mp4 and I will experiment with the coloring. main: "#621890", dark: "#3e105c", light: "#a662d0",
- The change in color / mask as the circles come together should be included as shown in the animation
- The default durations should reflect the provided mp4 but should be adjustable
- The final circle should grow as shown in the animation
Technology Requirements:
- React
- GSAP
- JavaScript or TypeScript
- SVG
Ask questions for clarification. Can you complete this? How long will it take you? Whats your experience?